Title: Sugar & Spice theme
Last modified: August 31, 2016
---
# Sugar & Spice theme
* [fleurette](https://wordpress.org/support/users/fleurette/)
* (@fleurette)
* [10 years, 1 month ago](https://wordpress.org/support/topic/sugar-spice-theme/)
* I love the Sugar & Spice theme, and would like to work with the theme fonts and
colors. I want my home page to look like the theme page, is it possible to use
the same lovely peach font color in my titles as well as the Sugar & Spice Header
font? How would I be able to find out what the theme font is and the code for
the peach and emerald? Thank you!
Viewing 15 replies - 1 through 15 (of 95 total)
1 [2](https://wordpress.org/support/topic/sugar-spice-theme/page/2/?output_format=md)
[3](https://wordpress.org/support/topic/sugar-spice-theme/page/3/?output_format=md)…
[5](https://wordpress.org/support/topic/sugar-spice-theme/page/5/?output_format=md)
[6](https://wordpress.org/support/topic/sugar-spice-theme/page/6/?output_format=md)
[7](https://wordpress.org/support/topic/sugar-spice-theme/page/7/?output_format=md)
[→](https://wordpress.org/support/topic/sugar-spice-theme/page/2/?output_format=md)
* [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
* (@crouchingbruin)
* [10 years, 1 month ago](https://wordpress.org/support/topic/sugar-spice-theme/#post-7251770)
* 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).
* Thread Starter [fleurette](https://wordpress.org/support/users/fleurette/)
* (@fleurette)
* [10 years, 1 month ago](https://wordpress.org/support/topic/sugar-spice-theme/#post-7251818)
* 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!
* [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
* (@crouchingbruin)
* [10 years, 1 month ago](https://wordpress.org/support/topic/sugar-spice-theme/#post-7251864)
* 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](http://codex.wordpress.org/Child_Themes)
or not, but if you haven’t, you can use a CSS plugin like [Custom CSS Manager](http://wordpress.org/plugins/custom-css-manager-plugin/)
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 */
}
```
* Thread Starter [fleurette](https://wordpress.org/support/users/fleurette/)
* (@fleurette)
* [10 years, 1 month ago](https://wordpress.org/support/topic/sugar-spice-theme/#post-7251885)
* 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!
* Thread Starter [fleurette](https://wordpress.org/support/users/fleurette/)
* (@fleurette)
* [10 years, 1 month ago](https://wordpress.org/support/topic/sugar-spice-theme/#post-7251909)
* What would be the none cursive default font in Sugar & Spice? Is it possible
to justify text in a widget of the sidebar? Thanks!
* [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
* (@crouchingbruin)
* [10 years, 1 month ago](https://wordpress.org/support/topic/sugar-spice-theme/#post-7251913)
* 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](http://www.w3schools.com/css/default.asp). 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](http://getfirebug.com/),
which is a free extension for Firefox, or [Chrome Developer Tools](https://developers.google.com/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.
* Thread Starter [fleurette](https://wordpress.org/support/users/fleurette/)
* (@fleurette)
* [10 years, 1 month ago](https://wordpress.org/support/topic/sugar-spice-theme/#post-7251962)
* 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!!
* [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
* (@crouchingbruin)
* [10 years, 1 month ago](https://wordpress.org/support/topic/sugar-spice-theme/#post-7251975)
* > 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.
* Thread Starter [fleurette](https://wordpress.org/support/users/fleurette/)
* (@fleurette)
* [10 years, 1 month ago](https://wordpress.org/support/topic/sugar-spice-theme/#post-7251978)
* 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: [http://cs-esterel.com/index.php/welcome-2/](http://cs-esterel.com/index.php/welcome-2/)
Thank you very much!
* [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
* (@crouchingbruin)
* [10 years, 1 month ago](https://wordpress.org/support/topic/sugar-spice-theme/#post-7251979)
* 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](https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/),
which you may want to read about if the CSS rules you write aren’t working like
you think they should).
* Thread Starter [fleurette](https://wordpress.org/support/users/fleurette/)
* (@fleurette)
* [10 years, 1 month ago](https://wordpress.org/support/topic/sugar-spice-theme/#post-7251980)
* Thank you very much indeed!! Thank you for explaining everything so thoroughly!
* Thread Starter [fleurette](https://wordpress.org/support/users/fleurette/)
* (@fleurette)
* [10 years, 1 month ago](https://wordpress.org/support/topic/sugar-spice-theme/#post-7251981)
* 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.
* Thread Starter [fleurette](https://wordpress.org/support/users/fleurette/)
* (@fleurette)
* [10 years, 1 month ago](https://wordpress.org/support/topic/sugar-spice-theme/#post-7251993)
* 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!
* [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
* (@crouchingbruin)
* [10 years, 1 month ago](https://wordpress.org/support/topic/sugar-spice-theme/#post-7251995)
* 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](https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/).
For example, let’s say you have a title element that looks like this:
* ```
This is My First Post
```
* 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:
* ```