Sugar & Spice theme

Did you try going to the theme options and changing the color scheme to Peach? That should change the titles from emerald to peach (which is, by the way, #F9AA89).

Thank you for letting me know the peach color, would you know the emerald too? Do you know what the decorative font of Sugar & Spice is? I’d like to use it for my page titles.(like the header of the site)
I need to change the color in google fonts , right? It did not let me change it in typography, the title is still gray. I have never done the steps yet in google font, with the CSS, but would like to use it throughout my site. What do I have to enter in google fonts when I want to change the font color of each title? Thank you for helping!

Emerald hex code is #36AB8A. I should add that the hover color property is rgba(54, 171, 138, 0.7), which is the same color, but they are using the rgba function to add a little transparency to the text. That is, when a title is hovered with the mouse, the color is the same, but the transparency is changed to 70% opaque (the 0.7 value at the end). The hover color value for peach is rgba(249, 170, 137, 0.7).

The font-family of the site title is Niconne. Are you using some sort of Google Fonts plugin? You shouldn’t need to unless you want to use a font that’s not already part of the theme. To change the color or font-family of various elements, you just need to use CSS. You didn’t provide a link to your site, so I don’t know if you’ve created a child theme or not, but if you haven’t, you can use a CSS plugin like Custom CSS Manager to add your custom CSS. Or if you have Jetpack installed, Jetpack also has a Custom CSS option.

So let’s say, for example, you want to modify your post and page titles to the Niconne font, and make them peach. You could add these rules:

.entry-title, .page-title {
   font-family: Niconne, cursive;
   font-size: 26px;
}
.entry-title a, .entry-title a:visited,
.page-title a, .page-title a:visited {
   color: #F9AA89;   /* peach */
}
.entry-title a:hover, .page-title a:hover {
   color: rgba(249, 170, 137, 0.7)   /* peach */
}

This is incredible kind of you, thank you ever so much. I am not using a child theme, I am very new to wordpress and not yet familiar with many things, including CSS, but I would like to learn.
I am building an online portfolio for my artwork, with a home page, and several pages featuring my art – such as ie. illustrations, concept art, etc. I am using page builder for the pages I added.
I am not yet familiar with CSS and installed google fonts as I was hoping to use Chopin script in my site, but it’s not part of google fonts, unfortunately.
I’d like to keep it simple but beautiful. Thank you, I was able to change the colors of the title! I would like to try to add the rules you sent. Would it be best just to install the custom CSS manager? I find that I need to adjust the spacing as well, above and below the title as there is too much space between title and the slideshow.
I would like my home page to look exactly like the theme page of Sugar & Spice, but am struggling with it.

May I ask something else? I am using lightbox plus color box, but when the image opens it opens on a default page with the sidebar rather than a full page width. How can I change that?
Thanks again!

What would be the none cursive default font in Sugar & Spice? Is it possible to justify text in a widget of the sidebar? Thanks!

Hi, Fleurette. The default font-family of the site (the one for the body element) is PT Serif.

For the heading tags (h1, h2, h3, etc), the “more” link, the first half of the widget titles, and the “meta” information (post date, post author, etc), the font family is Raleway.

As mentioned earlier, the cursive font-family for the site title, as well as the second half of the widget title, is Niconne.

Do you want to justify the text in all sidebar widgets or just a specific one?

As far as your earlier post goes, yes, you want to install a Custom CSS plugin to add your overriding rules. If you want to learn more about CSS, there’s a good tutorial here. It would also be very helpful, if you wish to learn how to make changes to your web site, to learn how to use a web debugging tool like Firebug, which is a free extension for Firefox, or Chrome Developer Tools, which comes built-in with Chrome. Then it’s simply a matter of right-clicking on an element that you want to examine and selecting inspect element from the pop-up menu in order to pop-open a window that shows you the CSS rules which affect that element.

I find that I need to adjust the spacing as well, above and below the title as there is too much space between title and the slideshow.

If you provide a link to your site, I can examine it and let you know what rules to add to adjust the spacing. I don’t have a slider set up on my test site for Sugar & Spice. I can also take a look as to why your lightbox isn’t opening up at full width.

Hello, thank you so very much again, this is really very kind. I looked at the tutorial, it is so helpful – thank you!

May I ask something regarding the custom css manager? Any changes that are entered on the cascading style sheet – once you click “save changes” – do they stay on that sheet? Can anything be undone?

I have the same spacing issue as you – the space above the title is too big. I am not using a slideshow, but a picture, and the space between the title and picture seems fine, but above the title there is too much. I can’t send a link at the moment, as my site is private.

I also would like to adjust the space between my widgets I found this in the stylesheet:
.widget {
margin-bottom: 1.5em;
overflow: hidden;
Is that the bottom margin that would need to be altered?
Can changes be made directly in the editor stylesheet or does it misconfigure my theme?

The lightbox issue seemed to have resolved itself – thank you!

Thank you very again much for sending all this valuable information, including the Firebug, there is much for me to look into and learn.
I am very grateful!!

Any changes that are entered on the cascading style sheet – once you click “save changes” – do they stay on that sheet? Can anything be undone?

Anything added to a CSS plugin will be saved. If you need to reverse anything out, just go back into the plugin’s editor and remove the rule that you previously added.

the space between the title and picture seems fine, but above the title there is too much.

How did you add the picture, by using a plugin? It’s difficult to suggest a CSS rule without being able to see what element is responsible for creating the empty space. You can try adding this rule:

.site-branding {
   margin-top: 0px;
}

To move the title up, you can try changing the value to a negative number, like -20px.

Is that the bottom margin that would need to be altered?
Can changes be made directly in the editor stylesheet or does it misconfigure my theme?

Don’t make any changes through Appearance → Editor. Any changes you make to the theme files will be lost the next time you update/upgrade the theme. Just add a rule in your custom CSS with the same selector, and include the properties that you want to change:

.widget {
   margin-bottom: 1.5em;
}

Then you can experiment with changing the values.

Once you learn how to use Firebug, you’ll be able to see what the CSS rules which affect a particular element, so you can add your own overriding CSS in your custom CSS plugin.

Hello again,

I do want to say thank you again for all the help you keep giving!I am very glad to know about the font details of my theme you sent in a previous post.Firebug is very new to me, but I hope to learn.
Regarding the picture, I used “add media” and the spacing appears to be fine. But the site title definitely is too low on the page, with yours as well?
Thank you for the rules, I tried entering -20 for the site branding in custom css, but it did not show any changes.
I created a sample page to send you a link – I hope this may help:
https://cs-esterel.com/index.php/welcome-2/
Thank you very much!

Ah, ok, now I see. It’s the title in the content that is too low and not the site title.

Try adding these three rules to your custom CSS:

#panel-440-0-0-0 h5 {
   margin-top: 31px;
}

.entry-content {
   margin-top: 21px;
}

#main {
   padding-top: 42px;
}

The values listed for each of the properties is what is currently in effect. If you change all of the values to 0, you’ll see that the title goes butt up against the navigation menu.

I would start with the first rule, change the value to 0, and see if the title is high enough for your liking. If not, then adjust the value for the second rule, and finally the third rule.

The first rule will only affect the title on that particular page. Page Builder does something sort of unusual in that it assigns these long numeric IDs to different elements (for example, panel-440-0-0-0), which makes it difficult to write CSS rules which apply across multiple pages. For example, the second and third rules will affect all other pages on your site, because each page will have an element with the class entry-content, and each page will have an element with the ID main. So making a change to those two rules will affect all of your other pages (unless you add additional selectors to make the rule specific to a particular page).

So here’s a brief Firebug tutorial. Go ahead & right-click on the Portfolio title and select Inspect Element from the pop-up menu. Firebug will open up in the lower part of the window.

The left pane will display the structure of the page, with the current element highlighted. You’ll see that the h5 element which holds the title is enclosed by a div element that has a class of textwidget. That div is called the “parent” of that h5 element, and that h5 element is a “child” of that textwidget div element. You can see parent/child/sibling relationships of different elements by how the code line is indented.

The right pane will show the CSS rules which affect the highlighted element. You can see that the very first rule is an inline rule which sets the text alignment property to center. If you hover your mouse over the text-align property, you’ll see a checkbox appear to the left. See what happens when you uncheck and check the box. The text should jump back & forth between the left and center. This is one of the nice features of using a web debugger, you can interactively make changes to the CSS and see those changes right away before you actually write the rules in your custom CSS. For example, in the second rule, you’ll see that the font size is 42px. You can click on the 42px and change it to a different value to see what the effect will be. Any changes you make in Firebug aren’t permanent, though; you have to write the rule to your custom CSS plugin to make them permanent. Usually it’s as easy as copying pasting the existing rule’s selector, along with the properties that you want to override.

If you scroll down the right pane, the fourth rule down will have a margin property that looks like this:

margin: 0.75em 0px;

What this means is that there will be 0.75em of empty space above and below the element, and 0 (no) empty space to the left & right of the element (in this case, the last parameter doesn’t show any effect because there’s nothing to either side of the element). 0.75em means 75% of whatever the element’s font size is. Because this h5 element’s font-size is 42px, that corresponds to a margin of 31.5px, which is how I came up with the value for the first rule I posted above. Note that the rule in Firebug shows that the rule is for h1 through h6 elements, so this is a “default” rule for h5 elements and will affect all h5 elements across the site. The rule I posted above includes the ID #panel-440-0-0-0 in the selector, so it will only affect that particular h5 element on that page, and no other h5 elements (this kind of leads into the subject of CSS specificity, which you may want to read about if the CSS rules you write aren’t working like you think they should).

Thank you very much indeed!! Thank you for explaining everything so thoroughly!

Oh my goodness – it works!! Thank you! The position looks much nicer now, I had to adjust the second and third rule. And thank you for the excellent tutorial, it’s overwhelming when you have never done this before.

Hello, thank you so much again for helping me understand Firebug. I found the elements you so kindly pointed out, but instead of a checkbox I have a red circle with a line through. I also noticed that many elements have lines through them, is that how it should be? What does it mean? When you say to copy the rules, would that be from Firebug or the style sheet? Can each widget be adjusted individually? The rule you had posted worked perfectly – thank you very much again!

I don’t know if I’ve ever seen the red circle with a slash. Here’s what I normally see. In the image, I have hovered over the first property (text-align) so you can see the checkbox that should be there to the left.

As far as the other lined out properties, the rules in the CSS pane are ordered according to their specificity. For example, let’s say you have a title element that looks like this:

<h5 class="post-title">This is My First Post</h5>

And let’s say there are two rules which might affect this element:

h5 {
   font-size: 15px;
}
.post-title {
   font-size: 26px;
}

What size to you think the post title would be? So the rules of specificity were set up so that browsers could figure out which property to use if multiple rules had the same property. Selectors were assigned specificity scores based on element names getting one point, class names getting 10 points, IDs getting 100 points, and inline styles getting 1000 points. In the rules above, the first rule has an element (h5) as its selector, so it has a specificity of 1. The second rule has a class name as its selector, so it has a specificity of 10. The post title will therefore have a size of 26px.

If there are two rules with the same specificity, then the rule which is defined last takes precedence.

Luckily, you don’t have to calculate the specificity of each rule. As I mentioned before, Firefox sorts the rules out and lists them in order of descending specificity, so the rules with the highest specificity are at the top. When you see a property that is lined out, that means that there is another rule with a higher specificity that has an identical property which overrides the lined out rule.

For example, if you inspect the Portfolio title, you’ll see that the fourth rule down, which has an h5 selector and is located in style.css, has both the font-size and line-height properties lined out. That’s because the rule above it, the third rule, which also has an h5 selector, also has both of those properties defined. I’m guessing that the third rule was defined later than the fourth rule, so that’s why it has precedence over the fourth rule.

Understanding specificity, and using a debugger like Firebug, will help you understand why certain rules that you create might not be working the way you think they should.

When you say to copy the rules, would that be from Firebug or the style sheet?

You can copy them from Firebug. Let’s take another example. Let’s say you wanted to change the text color of the menu items. Right-click on the About menu item and inspect it. In the CSS pane, the two rules at the very top looks like this:

nav#main-nav > ul > li > a {
    padding:8px 24px;
    color: rgb(102, 102, 102);
    display: inline-block;
    font-size: 0.857em;
    text-transform:uppercase;
    text-shadow: 1px 1px 0 #EAE1D8;
    text-align:center;
    text-decoration:none;
}
a, a:visited {
    color: rgb(249, 170, 137);
}

The color property in the second rule is crossed out because the rule above it (with the higher specificity) has an identical property. So first thing you would try is to create a rule with the same selector as the top rule, and the property that you want to change:

nav#main-nav > ul > li > a {
    color: rgb(255, 0, 0);  /* change menu text to red */
}

You would copy this into your custom CSS and see if it works.

One reason why it might not work is that maybe your CSS plugin’s stylesheet is being defined earlier than the stylesheet containing the rule that you are trying to override. Remember that if two rules have the same specificity, then the rule which is defined later (or last) takes precedence. So to get around this, you would add a value to the selector in order to bump up the specificity so it’s higher than the rule currently in effect. For example, adding the body element to the very front is a good way of bumping up the specificity by a point:

body nav#main-nav > ul > li > a {
    color: rgb(255, 0, 0);  /* change menu text to red */
}

So this rule should override the existing rule, even if it is defined earlier, because it has a higher specificity.

Can each widget be adjusted individually?

Yes, each widget should have a unique ID associated with it, so you can create CSS rules which target just the widget and the elements inside.

Right-click on the Copyright title down at the bottom of the page and inspect it. If you go up in the code pane through the different parent elements, you’ll come across this line:

<aside id="black-studio-tinymce-3"
class="widget widget_black_studio_tinymce">

So you see that the widget is an aside element with a class of widget. Also notice that the widget has an ID of black-studio-tinymce-3. Each ID is supposed to be unique on a web page. That is, there should be no other elements that has an ID of black-studio-tinymce-3 on that page. So if you wanted to change the font-size of that widget’s title, then all you need to do is add the ID as part of the selector:

#black-studio-tinymce-3 .widget-title {
   font-size: 26px;
}

So this rule would affect only that particular widget, and no other widget.

Thank you ever so much!! I am seeing and understanding the rules so much better now, thank you for the wonderful explanation. I created some widgets and adjusted a widget specific rule as you showed it here, and managed to move it higher (Flowers). Thank you for helping me understand CSS, it is really so kind.