Style Variables // Templates: just a couple of hints

[OPrescott]

Hey there ,

I've been customizing the style for the last couple of days and I'm almost finished + really happy how it's turned out.

I've used the style variables, looked up CSS definitions and searched for class / id in the templates and changed them there. Unfortunately, there are five last parts / colors I simply do not find:

Postbit

• Customize the Facebook and Twitter icons: I’d like to have smaller, square icons which are next to each other. Where can I change the current icons into real regular png-images?
• The grey-green color of Share Photo, Post Link, Upload Attachements, Toggle Advanced Editor, Add Smilies (screenshot #1)
• I was able to change the color of the Like-bubble - but not entirely. I missed the little white arrow on the left (screenshot #2)
• Down-arrow next to “Filter” (screenshot #3)

AdminCP-bar

• Background color of the admin bar. Strangely it is not "Main Navigation Admin Bar Background" in the style variables. (screenshot #4)

It would be so great if someone could give me a couple of pointers because I've literally looked for hours without any success.

Thank you so much!

[glennrocksvb]

Like bubble white arrow:

[Wayne Luke]

I suggest using the developer mode of Chrome or Firefox to inspect the elements you want to modify. You can then search the templates in the AdminCP for the CSS class or simply write your own custom CSS to override the defaults.

To search the templates in the AdminCP go to Styles -> Search in Templates.

For your own Custom CSS, it should go in the css_additional.css template under Styles -> Style Manager. Then press either the <<>> button or select "Edit Templates" from the drop-down menu for your style. You can also access the css_additional.css template by clicking on Style then select the CSS Editor tab in Site Builder on the front end.

The Site Builder menu does not have its own style variables so you will need to override its CSS. For Example:

.b-top-menu__background--sitebuilder {
  background-image: none;
  background-color: black;
}

These are the same steps that support uses every time someone asks how to modify CSS on an element.

[OPrescott]

Thank you very much! I got it.

[OPrescott]

That is I almost got it. I successfully changed the Facebook and Twitter buttons which I asked about earlier. Unfortunately, I don't seem to be able to get them next to each other (horizontal). One is still below the other (attached screenshot).
It'd be great, if someone could just tell me the template or file name I have to edit in order to get that done. Thank you!

[Wayne Luke]

The template is display_sharing. These are presented as an unordered list.

Try:

ul.b-sharing-menu li {float:left;}

Though you will probably need to play with margins and padding to make it look nice.

You should also test at mobile screen sizes so you can tell if the design works there as well.

[OPrescott]

It works perfectly! Thanks!