Share Child Theme CSS Snippets

[scenicoregonParticipant]

OK, OK, I’m getting it now. Sort of like in VB script, you have to call the class. If the class isn’t already in the right pane, then you pull it from the left. Here’s what I’ve figured out in the last 15 minutes or so:

/*This changes the numbers for number of images on the category page*/
.cat-item {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #888888;
}

/*This changes the font for the image desciptions on the image page*/
.entry-content, .entry-summary {
color: #cecece;
}

/*This changes the color of the text in the author head and image# head on the image page*/
.panel-default > .panel-heading {
color: #888888;
}

[scenicoregonParticipant]

OK, I’m stuck on this one. For the author-bio container, I want to either change the text color to a darker color through a CSS edit (I don’t want to affect any of my other text colors), or to change the background color within the container to black like the rest of the site. I can’t figure out the right class and other info to change– I’ve tried about half a dozen classes, but no luck.
Here’s a screen shot showing the Inspect Element– can anyone suggest one that’ll work?
Thanks

[JoAnnSnoverParticipant]

So here it is with the white background turned off (but you could set it to transparent rather than using a color to avoid problems if you changed the background color in the future) (click for full size):

So the specific container is div.author-bio.contributor.vcard.panel but I think you should be OK setting .panel and .author-bio to background:transparent – I don’t think there will be anywhere you want them to have a color

[scenicoregonParticipant]

Thank you, .panel did the trick, and I discovered several others for that section. Here are the snippets:

/*This changes the background to transparent or color on the author bio panel on the author page, but also makes several other Symbiostock panels transparent too, like on the some of the network pages and maybe the pricing table, including the new user and registration panel which should NOT be transparent*/
.panel {
background: #000000;
}

/*This changes the text color of the title on the author bio panel on the author page, and many of the panel titles on the image page*/
.panel-title {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #cecece;
}

/*This changes the text color of the the words “author attributes” and “site attributes” on the “author attributes and symbiocard” section of the author bio panel on the author page*/
.info {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #cecece;
}

/*This changes the text color of the the info under “author attributes” and “site attributes” on the “author attributes and symbiocard” section of the author bio panel on the author page*/
.accordion-group {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #888888;
}

[scenicoregonParticipant]

and here’s a few more:

/*This changes the text color of the file info on the cart page*/
.col-md-6 {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #cecece;
}

/*This changes the text color of the details on the pricing table on the image page*/
.col-md-5 {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #999999;
}

/*This changes the text color of the small text word “results” and number of images resulting when you click on a category*/
.results_info {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #cecece;
}

/*This changes the color of the gradient in the heading “Symbiostock Community News and Activity” on the Symbiostock Network page*/
.panel-info > .panel-heading {
background-image: linear-gradient(to bottom,#0a004f 0%,#000000 100%);
}

[scenicoregonParticipant]

Here are a couple for modifying thumbnails:

/*This changes attributes- like background color and more– of the thumbnails in the similar images widget*/
.thumbnail {
display: inline-block;
display: block;
height: auto;
max-width: 100%;
padding: 4px;
line-height: 1.428571429;
background-color: #000000;
border: 1px solid #dddddd;
border-radius: 0;
transition: all .2s ease-in-out;
}

/*This changes attributes- like background color and more– of the thumbnails in the categories display*/
.img-thumbnail {
display: inline-block;
height: auto;
max-width: 100%;
padding: 4px;
line-height: 1.428571429;
background-color: #000000;
border: 1px solid #dddddd;
border-radius: 0;
transition: all .2s ease-in-out;
}

[scenicoregonParticipant]

Here’s one for the new user and registration form:

/*This changes small text color of the user registration and login form*/
.wp-user-form {
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #cecece;
}

[ChromacoParticipant]

Hi all I am trying to remove the shadow boxes around the image by editing my child theme. I am adding this.

.panel {
box-shadow: none;
border: 0;
}

It works but when I add it, the color of my search box changes color. I would like the color to stay red as in the “simplex theme” however when I add this text the search box and the links on my site turn blue. Can someone please help me figure out what I am doing wrong.

[JoAnnSnoverParticipant]

I had a look at teamclipart – that is the site you’re trying to modify the appearance for, correct? – and I don’t see any shadow boxes. Does that mean you got things fixed?

If not, can you provide a link to a page that shows the problem?

So as an example of how you add something (and the comments are optional but really helpful for when you go back and edit things later), my changes to various panel related classes look like this. I included another change above so you can see the syntax of things – I’m wondering if you pasted in your code in the “wrong” place.

/* headers */

.page-header {

padding-bottom: 0px;

margin: 20px 0 10px;

border-bottom: 0;

}

/* panel items body, title, header, nav area etc. As a panel-title is put inside a panel-heading, don't pad both */

.panel, .panel-heading, .panel-default, .panel-info, .nav, .navbar-default {

margin-bottom: 0px;

margin-top: 0px;

padding: 0px;

background-image: none;

}

[ChromacoParticipant]

Yeah its working. Problem is that the default color is actually supposed to be red not blue. For some reason the red is being replaced with blue. Not a real big issue except some of my image pages have red already set up and now those pages look like a christmas tree with green, red, white, grey and now blue. I would love to remove the shadow boxes and leave everything else as it is.

[Author]

Posts