Help with adding custom CSS - easy
Permalink
Hi,
I think my problem is quite easy to fix, I'm just not very knowledgeable with CSS...
One of my fonts is a bit too condensed, and I would like to adjust the letter spacing for a particular block. I'm aware of the: "letter-spacing: 0.1 em;" option, but how do I add this? I'm not sure about class ID's and styles etc..
Please include as many details as possible..
Much appreciated,
Edwin
I think my problem is quite easy to fix, I'm just not very knowledgeable with CSS...
One of my fonts is a bit too condensed, and I would like to adjust the letter spacing for a particular block. I'm aware of the: "letter-spacing: 0.1 em;" option, but how do I add this? I'm not sure about class ID's and styles etc..
Please include as many details as possible..
Much appreciated,
Edwin
Thanks so much for your response. I appreciate your time. I'll look over these, but would still appreciate your help working this through.
My website ishttp://www.citylinechurch.net and I am wanting the text on the right part of the homepage to be adjusted (It says "Inviting. Belonging. Wondering"). Right now I have manually put in spaces between each letter, but I'd like to adjust that.
Thanks a lot.
My website ishttp://www.citylinechurch.net and I am wanting the text on the right part of the homepage to be adjusted (It says "Inviting. Belonging. Wondering"). Right now I have manually put in spaces between each letter, but I'd like to adjust that.
Thanks a lot.
Follow to folder in your ftp client.
[root]/packages/naturalconcrete/themes/naturalconcrete/style/iGotStyle.css
go to line 79 and find
and try to change it to
[root]/packages/naturalconcrete/themes/naturalconcrete/style/iGotStyle.css
go to line 79 and find
#sliderShell .page_title { font-size: 60px; color: #fff; margin: 0; padding: 4px 0 0; }
and try to change it to
#sliderShell .page_title { font-size: 60px; color: #fff; margin: 0; padding: 4px 0 0; letter-spacing: 15px; } /* attach desired value into letter-spacing*/
Works like a charm...
I guess the only issue here is that since it is not placed in a custom css, that it will need to be changed whenever Concrete is updated.
But it works great. Thanks so much!
I guess the only issue here is that since it is not placed in a custom css, that it will need to be changed whenever Concrete is updated.
But it works great. Thanks so much!
Glad to hear !
First of all you have to checked that particular block id or class from inspect the element through firebug....then in your active theme's css you have to write the code
<code>#your block id{
letter-spacing: 0.1em;
}</code>
if its not support then put important
<code>#your block id{
letter-spacing: 0.1em !important;
}</code>
Thanks
<code>#your block id{
letter-spacing: 0.1em;
}</code>
if its not support then put important
<code>#your block id{
letter-spacing: 0.1em !important;
}</code>
Thanks
Thanks for this information too.
In your theme folder there are iGotStyle.css
in this folder please put this code
<code>.page_title cufon {
margin-right: 10px;
}
</code>
you may be change the required px whatever you need for spacing
in this folder please put this code
<code>.page_title cufon {
margin-right: 10px;
}
</code>
you may be change the required px whatever you need for spacing
I hope this helps..thanks
Thanks Jupiter. I ended up trying the other method above and it worked fine. But thank you nevertheless.
If you have live link for your website, please provide and show which one you want to change. me or somebody will tell you.
If you want to do it by your hands, use this link to get basic knowledge about chrome developer tool and search your element class
quicktip: right click on element -> "inspect element" -> on the right side of newly opened window you will be able to see classes and selectors affecting element you have inspected
Almost each modern browser has its own debugger, so if you use firefox follow almost same schema but for firefox.
After you know your class, edit it in related .css file.
If style comes from block, probably your view.css file is in blocks/<blockname>/templates/<templatename>/view.css file or simmilar in package
If its default theme style, redirect to /themes/<themename/typography.css or /themes/<themename/styles.css or any other related stylesheet.
I hope this helps,