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!
-
You have been so kind and helpful, thank you again!! I am still a little stuck with the title – it’s working fine for the titles I added in the body – such as the Portfolio title on my welcome sample page. But I am thinking of using titles for the individual art pages, such as concept art etc, but don’t seem to be able to get it lower down. I copied the rule from the Firebug and altered the margin but it did not change at all, what am I doing wrong? I was able to change the font size of the concept art title – thanks to your explanations, but not the margin as it sits right against the top. Do I need to add padding? Thank you very much again!
What rule(s) did you try?
So remember earlier that to move the title up for the Welcome page, I had you add & adjust these three rules:
#panel-440-0-0-0 h5 { margin-top: 31px; } .entry-content { margin-top: 21px; } #main { padding-top: 42px; }The first rule is very specific to the Welcome page, because Page Builder assigns ID numbers to the different elements on the page. The last two rules are very general. Because each page contains an
entry-contentsection as well as amainsection, then those two rules will affect all of the pages on the site, not just the Welcome page.So here’s what I would do. Make a copy of the third rule, but make it specific to the Welcome page. The way to do this is to add the page’s ID as part of the selector. That is, if you inspect the page and look for the
bodyelement (it will be very close to the top, because thebodyelement encloses almost all other elements), you’ll see that one of the classes of the body element looks like page-id-###, where ### will be some unique number that identifies that page. For the Welcome page, that class is page-id-440. So create a fourth rule, which is identical to the third rule, but which has the page ID class added to the front, and then you can change the third rule’s padding back to the original value (or some other value depending upon how far down you want the page titles to be:#panel-440-0-0-0 h5 { margin-top: 31px; } .entry-content { margin-top: 0px; } #main { padding-top: 42px; } .page-id-440 #main { padding-top: 0; }So the fourth rule, the more specific rule, will only affect the Welcome page, but the third rule, the more general rule, will affect all other pages (including the pages under the Portfolio menu).
Thank you so very much again! When you explain it all, it seems so clear and simple, but it never quite seems to work when I try it.
Yes – of course I remember how you so kindly gave me the rule for the titles, I think I had mixed it up, trying to make the concept art page rule page specific rather than what you just showed me. I am still so new to CSS that I don’t know yet about adding a fourth rule, thank you for showing me that rule, it worked perfectly! I am so glad.
I wanted to ask, that is what confuses me most – if I want to add a rule, how do I know what specifications (of that page) I need to write?Some examples show .div, or .p } and then the rule…
For example, I created a row with 2 pictures on my welcome page. Let’s say I want to move it up, what would the rule be? I keep rereading all the information you gave me and looking at the tutorial for CSS, but don’t quite understand yet.
I used pagebuilder for the row and then copied this rule from Firebug:
.aligncenter, img.aligncenter {
clear: both;
display: block;
margin: 0 auto 1.5em;
}
.entry-content img {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
padding: 5px 0;
position: relative;
}
To make it specific to the welcome page I would enter:
.page-id-440 #main {This shows on the left in Firebug for my row:
<div id=”pg-440-1″ class=”panel-grid”>If I enter .pg-440-1 { then what is the rule to go with it?
I tried both, padding and margin top, but it did not work for me. Is it even possible to adjust the spacing of a row or picture?Thank you very kindly again – I really am so grateful for your expertise.
Thank you again for all the exceptionally kind help you have given! I am able to adjust some rules now, it’s been working, thank you very much! Thanks for helping someone who did not know about CSS to understand it better, and for the tutorials!
Hi, Fleurette:
Sorry I didn’t respond to your earlier post. I had taken a quick look at your site, and saw that your custom CSS had a couple of errors in it, but I didn’t have the time to post anything. Hopefully you caught them, but just in case you haven’t, I remember one of the rules looked something like this:
#main { margin-top: 1.5 px; }Browsers can be very unforgiving with regards to syntax, and the problem with this rule is the space between the 1.5 and the px, it should be 1.5px. Plus, 1.5px is probably going to be too small to make a difference, start with the default of 42px and work your way down.
The last thing that needed to be fixed was a missing right brace } for the very last rule. The rule might still work without it, because it’s the last rule, but if you try adding other rules after that one, they won’t work properly, so add in that last brace.
Glad to be of help, and that you learned something. Feel free to ask other questions in the future.
Hello, I do thank you so very much for your message. I am sorry, I had my page closed as I did some work, but opened it again now. I looked at the error you mentioned and changed it to 42px } and it worked wonderfully – thank you again. I found that by applying the page specific rule you showed me I was able to adjust the titles without affecting the other page. I am understanding it better now, thank you so much, the other day I even could do a few minor adjustments.But I am very glad and grateful to know that I may ask a few more questions if need be – as I am sure before my site is finished somewhere I will get stuck again! (I hope this post will not be closed too soon?)
Thank you very very much again.Love this theme <3 just wondering if it would be possible to add a shopping cart Icon link into the header somewhere. I am using this them with Woocommerce and works quite well, would just like to tweak a few things.
Many thanks
GaryGary, you probably need to create a child theme and then add your code for the icon link to a copy of the header.php file.
In the future, please create a new thread instead of jumping on an unrelated thread. Then the original poster won’t get unwanted e-mails that don’t pertain to the original problem. Thanks.
Thank you for keeping the original post open. I am still working at my site and am so very thankful to know that I may ask you something again in the future!
Unless a moderator decides to close it, it should stay open for a year.
Thank you!
Hello again,
the last few days ( I am still working at my site) I encountered a few minor issues with my sugar and spice theme. When I tried to add a link to a picture it would just turn and turn, and not link, and when I tried to save a new widget it would neither save nor update. Each time after I restarted my computer it worked fine again.
Thanks to all your previous kind help it has been working so good so far with my site, and it only happened these last two days. My site is still private, it is the first time that these issues appeared, I am a bit concerned. Would you have any advice?
Thank you very much!It doesn’t sound like there’s anything wrong with your site. It sounds like you are having some network issues, if rebooting your computer helps. Have you noticed any slow down when you browse the internet in general?
Thank you, I am so glad to know. Not really, a couple times but it seems better again. I am still not all familiar with having a site so I was not sure if I needed to do anything for security I might not know about. I will keep watching it.
May I ask you, once my site is open and I need to do more changes or add pages, how can I do this if clients are able to view my site? I like to experiment with pages before they are final, is it enough just to have them set to private until done?
Thank you so much again!For new pages, you can set the status to Draft (instead of Publish) and it won’t appear on your site. You can still see how it looks by clicking the Preview Page link. Or, even if you Publish the page, as long as you don’t create a menu item to the page, then your users won’t be able to find it.
For existing pages, you can always copy the contents into a test page that is either in Draft, or doesn’t have any links leading to it. Then once you’ve made the changes to your liking, copy the contents back into the original page.
Since you mentioned security, the one plugin that I recommend for everyone is a security plugin called Wordfence. I’ve had a site hacked before, and it was difficult figuring out how to remove the hacked files. Wordfence will do a daily scan on your WordPress site and report whether there are any suspicious looking files that don’t belong. It will also inform you of attempts to login to your site, and block addresses that fail 20 login attempts (although your privacy plugin seems to do the same thing). It can also send you an e-mail when someone logs in (although this is through the regular WordPress login; I don’t know how it would work with your privacy plugin’s login).
The topic ‘Sugar & Spice theme’ is closed to new replies.
