Nucleare CSS changes

ljwaskew3 · Member · Jun 2, 2015 at 8:23 pm
Copy link

Add topic to favorites
Hi,

Could I please get help with a few customization for the nucleare theme:

1. Can we decrease size of the site title?

2. Can we move the tagline down a bit from the site title? In other words, have more space between the site title and site description.

3. Increase size of the font in widgets; both widget titles and text.

Thank you!

The blog I need help with is: (visible only to logged in users)
staff-jeanpierreac · Staff · Jun 2, 2015 at 9:03 pm
Copy link
Hi. Yes, you can… :)

1. Can we decrease size of the site title

You can use “.site-title” selector. Your current font-size is 5.0rem, so you could try 3.0, for instance:
```
.site-title {
  font-size: 5.0rem;
}
```
2. Can we move the tagline down a bit from the site title? In other words, have more space between the site title and site description.

Just select your preferred margin in this piece of code:
```
.wf-active .site-description {
  margin-top: 30px;
}
```
3. Increase size of the font in widgets; both widget titles and text.

This is more complex. You can use “aside .widget-title” to reference titles, and then, there are text fragments inside a p element, inside links or even directly inside div elements. So you can choose your text-size customizing this code:
```
aside .widget-title
{
  font-size: 30px;
}
aside p, aside div, aside a {
  font-size: 20px;
}
```
I hope this helps.
ljwaskew3 · Member · Jun 2, 2015 at 11:54 pm
Copy link
That all worked really well – thank you!

Could I also please get CSS to change the color of the footer color? That would help the text stand out more.
staff-jeanpierreac · Staff · Jun 3, 2015 at 6:36 am
Copy link
Hi!

Do you mean “All right reserved…” message? If so, the selector is “.site-info”. So, depending on if you want to change text color, background color or both, you can use one/both lines in this declaration (changing the color palette :) ):
```
.site-info {
    color: rgb(255,0,0);
    background-color: rgb(0,0,255);
}
```
Just in case you want to affect the same modification to the second line (Blog at WordPress and Theme), you can extend the selector, using “.site-info, .site-info a” instead of only “.site-info”

I hope this helps. :)
.site-info, .site-info a
manuelguiaronda · Member · Jun 3, 2015 at 8:21 am
Copy link
Hi, could I make you some question?
Where are you change this CSS?
I want change some CSS of forever theme and I can’t find where I can do it
I change it in the same page, adding inlaid CSS but I don’t like this solution

Thank in advance
staff-jeanpierreac · Staff · Jun 3, 2015 at 12:51 pm
Copy link
Hi @manuelguiaronda.

Custom CSS is part of Custom Design, which is a feature of the WordPress.com Premium and WordPress.com Business plans, and it allows you to customize the appearance of your blog by editing your theme’s CSS (Cascading Style Sheet). Custom CSS allows you to change fonts, colors, borders, backgrounds, and even the layout of your blog.

Here you will find more about Custom CSS

Have you activated WordPress.com Premium or WordPress.com Business plans?

I hope this helps.

PS: Hopefully I will be visiting Ronda this August :)
manuelguiaronda · Member · Jun 3, 2015 at 2:44 pm
Copy link
Thanks, I haven’t activated neither of them
ljwaskew3 · Member · Jun 3, 2015 at 7:58 pm
Copy link
staff-jeanpierreac thank you so much for your help! I really appreciate it!

We would actually like to change the background color of the footer, where the map and custom menu widgets are. I’d like to make it a darker gray so the white font stands out more. If you could help with that would be awesome :). Thanks again!
thesacredpath · Member · Jun 3, 2015 at 8:39 pm
Copy link
The color of the footer widget area is set as an RGB white with an alpha transparency/opacity. The first three numbers, 255, 255, 255 are the RGB code for white, and the last number, 0.3 is the transparency. The closer to 0, the more transparent. You can replace that with a standard hex color code if you wish.
```
.site-footer {
    background: rgba(255, 255, 255, 0.3);
}
```
Example with hex color code.
```
.site-footer {
    background: #333;
}
```
ljwaskew3 · Member · Jun 4, 2015 at 12:48 am
Copy link
Thank you! that works!
thesacredpath · Member · Jun 4, 2015 at 2:03 am
Copy link
You are welcome.
staff-jeanpierreac · Staff · Jun 4, 2015 at 5:37 am
Copy link
@ljwaskew3 Glad to read that worked! :)

@thesacredpath thanks for completing the answer!
thesacredpath · Member · Jun 4, 2015 at 2:44 pm
Copy link
staff-jeanpierreac, you are welcome.

No items found.