Community Forums › Forums › Archived Forums › Design Tips and Tricks › How and where to add custom box code to css styles sheet please
- This topic has 6 replies, 2 voices, and was last updated 9 years, 11 months ago by JennyLon.
-
AuthorPosts
-
April 22, 2014 at 4:54 pm #101953JennyLonMember
css and coding is new to me I use genesis (latest update) with lifestyle theme version 1.0
Please anyone...Where and how should I go about adding to my css style sheet a few different custom code content boxes?( I have a few differences looks and styles etc) And below you will see a code for one of them.
So, where would I put that .....and if I had a few others again would they all be pasted in same area I presume making sure this end of code symbol is there ie.
}
that symbol is always last thing included to end code and ANY new boxes go after that
}
end code symbol etc? (sorry not sure what it means)
Also What part of the box name needs to be pasted in the page content area for it to show for example taken from name of box below would it be
all this : /* HIGHLIGHT BOX - CREAM */
and include the */ before AND after it? or not?Note***
I Presume once on a page or post I paste it in the html code tab (not text content) where I specifically want it to be ready for me to add words inside the box image etc.here is an actual custom box name and code below and all its sizes looks styles etc. box shadow etc.
/* HIGHLIGHT BOX - CREAM */
.format_text .highlight_box_cream {
/* distance from borders to content*/
padding: 0 1em 0 1em;
/* spacing outside of box*/
margin: 0 0 0 0;
/* background color */
background: #Ffffff;
/* border size style color */
border: 1px solid #999999;
/* rounded corners */
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: #666666 0.4em 0.4em 0.25em;
}April 22, 2014 at 6:41 pm #101973Lauren @ OnceCoupledMemberHey Jenny,
I don't fully understand your questions, think you could link to your site so I could have a look and try to see what you mean?
Where should you put custom CSS code?
It depends on your theme. Some have custom.css files that you should use. If not, you could just edit your style.css directly. Pasting your custom styles to the end of your style sheet, juuuuust before your media queries (designated by @media) would probably be a good place. I usually give it a commented out heading, something like/* custom styles */
What part of the box name needs to be pasted in the page content area?
Erm, do you mean if you want those styles to be applied? You'd do something like:<div class=".highlight_box_cream"> content </div>
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 24, 2014 at 10:47 am #102175JennyLonMemberHi Lauren
thanks for getting back to me on this...
I applied before now a few other custom content boxes to my style sheet and they show up fine
This one I am having trouble with as pasting in the code you gave in the html text tab does not have it show.
I noticed with my other boxes the code to paste in the content html tab (text they call it now) was without the dot yet you put one in before the word highlight
<div class=".highlight_box_cream"> content </div>for example another box added to my stylesheet works fine and I apply this to my page content html for it to show:
<div class="color-box2">content</div>Notice NO dot anywhere, well I tried the one in question you gave me to pasted in it also without a dot and still no joy.
The code for the box I mentioned in my post is taken from the source code for its css style sheet and you can see how the box should be at http://julierenee.com/
Would you mind seeing if you add the code to a test page on your theme ?
and see if you can get the box showing up and then let me know what you pasted into the content html tab for it to work.I am using genesis and lifestyle theme version1.0
Many thanks
JennyApril 24, 2014 at 11:14 am #102179Lauren @ OnceCoupledMemberHey Jenny,
You're right, I had a typo there, no dot needed in the HTML.
So what I'm understanding is that you're trying to create text within a widget area that has specific styles.
In your text widget, you need:
<div class="highlight_box_cream">content</div>
In your style sheet, you need:
/* HIGHLIGHT BOX – CREAM */ .highlight_box_cream { /* distance from borders to content*/ padding: 0 1em 0 1em; /* spacing outside of box*/ margin: 0 0 0 0; /* background color */ background: #Ffffff; /* border size style color */ border: 1px solid #999999; /* rounded corners */ -moz-border-radius: 5px; border-radius: 5px; box-shadow: #666666 0.4em 0.4em 0.25em; }
Your widget area does not have the first class that is supplied in Julie's code, that's all.
In the future, please post your site link, as this would have greatly expedited the process. ๐
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 24, 2014 at 12:45 pm #102195JennyLonMemberHi Lauren
many thanks it now shows up good of you...!!
I did notice though only one side underneath the box has shadow effect applied and NOT to the right side edge of box like Julies original borrowed css custom code so any ideas why that maybe?
(doubled checked her code and we have same)
By the way what would be the same in px as 0.4em as maybe my genesis Lifestyle theme 1.0 version does not like perhaps the em way of coding?
May I ask while on that subject your thought on us using Lifestyle theme version 1.0
I don't really want to update our lifestyle theme to latest version 2 as the web designer at the time well over a year ago applied various customs css to it making pages wider, side bars borders wider and all sorts of things and we would no doubt have to start all over again to make things look the same in version Lifestyle 2.0 (As the preview view of applying lifestyle 2.0 theme messed with everything bumping into each other!) and we have 5 sites using same version1.0.
***Hence What are your thoughts simply sticking with Lifestyle.1.0 baring in mind what I said above*****Oh and we have latest wordpress updates always applied along with Genesis framework updates regularly when released right now for example Genesis Version: 2.0.2 ยท for us.
Jenny
April 24, 2014 at 2:15 pm #102215Lauren @ OnceCoupledMemberIt's probably there, just being cut off. You may be able to add some padding to that widget to get it to show up, I don't know for sure.
As for your theme, other people may know better than I do, but you can read about the changes here: http://www.studiopress.com/releases/lifestyle-theme-20.htm. If you don't think you need those changes, no sense in moving themes.
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
April 24, 2014 at 2:46 pm #102220JennyLonMemberMany thanks Lauren....!
you have been very helpful.
have a nice weekend coming up...
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.