Changing the font family, font color etc – in general in Sempress

lilasumpf · Member · Nov 11, 2014 at 2:32 pm
Copy link

Add topic to favorites
Hi all,

I hope that you could help me.
I am a total CSS-Newbie and searched all through this forum and many blogs, helping out with customizing my theme (Sempress) using CSS.

I am nearly where I want to be with the look, however in some cases it is still messy and I was wondering whether there would be an easier way to do it.

I would like to use the font “museo” in generel – even in the widgets (which seems to be my biggest problem)

Also they should have all one colour, links should be in another color with hover, visited links don’t need to have a different color.

There should be no shadow around my text and everyhing should be align:left…

Somehow, the widgets are evil little things and I ended up having a million CSS rules…

Isn’t there ONE place (body? Style?) where I can edit this for my whole blog?

Any help with this would be more than welcome – lilasumpf.wordpress.com

Thank you in advance.

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Nov 12, 2014 at 1:06 am
Copy link
You’ve posted several questions in one, so I’m going to split them up and post about them in one reply at a time. Sounds like you’re off to a great start but just have a few tricky things for the home stretch. :)

I would like to use the font “museo” in generel – even in the widgets (which seems to be my biggest problem)

Updating the font settings in Appearance > Customize > Fonts so that both the heading and body font is set to Museo should take care of this. I checked the font in the widgets on the home page at http://lilasumpf.wordpress.com/ and all of the paragraph text and links do in fact appear to be using the Museo font from what I can see. Is the paragraph and link text in the widgets also what you are looking at? If you are sure you are seeing the incorrect font, would you mind taking a screenshot of the entire browser window for me so I can see what you are seeing?

Take a Screenshot
designsimply · Member · Nov 12, 2014 at 1:13 am
Copy link
Also they should have all one colour, links should be in another color with hover, visited links don’t need to have a different color.

In your custom CSS, I see you have a rule for “#secondary ul li a” to change the color. That selector targets any link (a) inside a list (ul) inside the sidebar container (#secondary). In the case of the links under the “Abonnierte Blogs” heading, the selector is not as specific, it’s: “#secondary a” and you also already have a rule for that in your custom CSS.

Go to Appearance > Customize > CSS editor and look for this:
```
#secondary a {
    font-size: 1.1em;
	  color: #e860ed;
}
```
Based on your description above, it sounds like you want to change #e860ed to #c1a6e7
designsimply · Member · Nov 12, 2014 at 1:20 am
Copy link
There should be no shadow around my text

I don’t see a shadow around any of the text, but I might just have missed it. Could you point out a specific part of the text where you are seeing shadows so I can take a closer look?

and everyhing should be align:left…

Do you mean the links under “Abonnierte Blogs” in the sidebar should not be indented? If yes, try adding this to your Appearance > Customize > CSS editor to get rid of the indentation and move them left so they are flush with the sidebar container edge:
```
.widget ol {
  margin-left: 0px;
}
```
designsimply · Member · Nov 12, 2014 at 1:24 am
Copy link
Somehow, the widgets are evil little things and I ended up having a million CSS rules…

Sometimes widgets can have various specific rules on their own, and each one just needs to be checked and overriden.

Isn’t there ONE place (body? Style?) where I can edit this for my whole blog?

There isn’t because what is happening is that you are overriding bits and pieces of the theme’s original CSS without actually editing the theme’s CSS. This is an easier/better way to make small changes, especially for beginners. If you are very advanced with CSS, then you can copy the stylesheet, edit any relative paths to make sure they will work after a move (this is an important/advanced step), and then you would be able to turn off the theme’s CSS edit all of the CSS from the Appearance > Customize > CSS editor. However, it can get very unwieldily very very quickly if you are not sure what you are doing :) so I don’t recommend it.

Instead, what you probably want is this:
http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/
lilasumpf · Member · Nov 12, 2014 at 5:21 pm
Copy link
Thank you so much, also for takting the time and explaining everything AND giving me detailled help.

I followed your suggestion and found a theme that is much more suitable for my “style” and am using it now, without having to make any CSS changes…

Nevertheless, it did make me curious to learn more about CSS … :O)

Thank you again for your help!
designsimply · Member · Nov 12, 2014 at 5:43 pm
Copy link
I love CSS! If you ever want to learn more about it some time, try this out:
http://www.codecademy.com/courses/web-beginner-en-TlhFi/0/1?curriculum_id=50579fb998b470000202dc8b

No items found.