Share Child Theme CSS Snippets

[LeoParticipant]

It should be standard practice to have a child theme set up with Symbiostock

If you are looking to customize your site based on the initial install, start with the Symbiostock blank child theme:

https://github.com/orangeman555/symbiostock/blob/master/symbiostock-child.zip?raw=true

One of the easiest and non-invasive ways to customize Symbiostock is simply by adding to or over-riding it’s CSS. This can be done through the admin editor:

Admin -> Appearance -> Editor

This screen will bring you right to the CSS eding area. You can also customize the functions file, etc, but for many people that will be unecessary.

Through the CSS, you can alter colors, proportions, fonts – many things – that are not possible through the out-of-the-box customizer screen.

Whle you can probably rely on people to share some wonderful alterations / snippets and just browse through them, you may also wish to being learning the subject yourself – http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/the-best-way-to-learn-css-2/

Here is a nice CSS generator for some of the prettier and advanced effects like shadows and gradients:

http://css3generator.com/

[ChristineParticipant]

Probably the only safe thing I can offer at the moment is the colour of the arrows in the new 2.8.0 category section

/*category arrows
*/
.label-primary {
background-color: #add-your-colour-here;
}

http://kerioakimaging.com - trying to reopen
http://nail-art-at.kerioak.com - Art and Nail Art

[JoRodriguesParticipant]

… short attention me 😀

[LeoParticipant]

Remove panel borders

.panel {

box-shadow: none;

border: 0;

}

(insert into your child theme’s CSS)

[ChristineParticipant]

Button Colour Change – this is a bit more than a snippet and probably does not need the whole thing, but you need to change the hover bits as well, so I am including it all until someone posts a shorter version

/*button colours
*/
.btn {
border-color: #CCA8CC;
}
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
color: #8B0E9C;
background-color: #CCA8CC;
border-color: #9710B1;
}

.btn {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #DFC7EE;
background-image: linear-gradient(to bottom, #FFFFFF, #DFC7EE);
background-repeat: repeat-x;
border-color: #BBBBBB #BBBBBB #DFC7EE;
border-image: none;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
color: #8B0E9C;
cursor: pointer;
display: inline-block;
font-size: 14px;
line-height: 20px;
margin-bottom: 0;
padding: 4px 12px;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
}

http://kerioakimaging.com - trying to reopen
http://nail-art-at.kerioak.com - Art and Nail Art

[JoRodriguesParticipant]

A word of caution; avoid editing things that look like this, “display: inline-block;” unless you know what you are doing. It’s how the items gets laid out on the page and not what BLOCKS looks like when you see them in your browser.

A lot of problems cropping up are because of people changing the actual layout and then other elements of the page are misbehaving because they no longer have the intended relation to the rest of the page.

So if you are unsure, either research it on line or ask.

Jo

Edit: Also, as I’ve mentioned before, the syntax is precise. Centre is incorrect as the code is looking for “center”. Similarly for UK English (I still sometimes forget myself) it is “color” and not “colour”

Sometimes just using capitals instead of lowercase can cause problems in places.

[JoAnnSnoverParticipant]

@christine wrote:

Button Colour Change – this is a bit more than a snippet and probably does not need the whole thing, but you need to change the hover bits as well, so I am including it all until someone posts a shorter version…

Thanks for this.

I used it – but modified so it was gray on gray for my site. There’s one part I see that I don’t like on my button (now named Checkout as that’s the new default; I will change it to Add To Cart when I figure out if I need to change the code or if there’s a UI for that somewhere). On your site the button looks OK and I’m wondering if it’s because you changed something elsewhere.

If I hover over my checkout button I see puke green instead of gray. Your button stays purple. It’s possible this has to do with using the dragonfly child theme, but I thought I’d ask in case you’d seen the puke green and changed it somewhere else.

It would be so helpful if there were some sort of guide to the names of these items on the page; hunting around in the view source is slow going. I take it there isn’t any sort of documentation anywhere?

[JoRodriguesParticipant]

To change the Text of the Cart Button go to Symbiostock > Symbiostock > Settings > “Product table “Cart” Button Name”.

Jo

[JoAnnSnoverParticipant]

Thank you so much – that’s done so it now says Add to Cart

[JoRodriguesParticipant]

Mine too! It sort of makes more sense to me 😀

Every day I keep thinking… someone REALLY needs to set up a Sticky Thread called FAQ and stick these quick tips in it. It’s counter productive to keep either retyping or looking for the relevant thread that contains the info hehe.

Jo

[JoRodriguesParticipant]

Oh and I only know some of these things because I just worked on it recently. In a few weeks/months I won’t remember any more.

J

[scenicoregonParticipant]

I’m seeing some problems in 2.9.4 that I’m hoping some CSS edits will clear up. Here are the problems I’m seeing, and if someone knows the CSS in the child theme to fix this issue, please enlighten me:

Text in the following locations, in all three browsers (IE 10, Firefox, Chrome), shows as a very dark grey, not a color that I have selected anywhere in the customizer. It is hard to see on my dark background and dark heads. Problem locations, image page: Image description (below the picture), head of author section, head that shows image#. Again, if anyone knows the CSS to add in the child theme to fix these, please let me know.

[JoAnnSnoverParticipant]

You can find out (usually) where to make the changes by using Chrome’s Inspect Element. Right click on the item you want to modify and select Inspect Element and it will open up the developer tools window. For your image description, for example, I changed your page (in the window just to see if it worked) to add

.entry-content, .entry-summary {
color: white;
}

Which produced this (click to see full size):

You’ll need to transfer the changes you decide on to style.css (for Dragonfly you can use Appearance-> Editor; for other child themes you can use Edit CSS)

[jarihParticipant]

I used just the same tool on Firefox, “Inspect Elements”. Very nice tool to find out right codes!

[scenicoregonParticipant]

OK, I can use the Inspect Element, and I can get the text to change on the page I’m viewing, but transferring it to the CSS page is where I’m having trouble. For example, for the heads that are too dark, I found in the Inspect Element right panel this code:

media=”all”
.panel-default > .panel-heading {
color: #333333;
}

I pasted this into the CSS (Appearance>Edit CSS), saved it, and then reloaded the page (and tried other pages also), but there was no change. I guess I don’t really understand what I need to copy and paste into the CSS editor, how much from that right panel in the Inspect Element I need. How do I figure this out?

[Author]

Posts