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

View Replies: View Best Answer
grosik replied on at Permalink Reply
grosik
Hi, to add spacing between letter yes, you can use letter-spacing in css.

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,
citylinechurch replied on at Permalink Reply
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.
grosik replied on at Permalink Best Answer Reply
grosik
Follow to folder in your ftp client.
[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*/
citylinechurch replied on at Permalink Reply
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!
grosik replied on at Permalink Reply
grosik
Glad to hear !
Jupiter replied on at Permalink Reply
Jupiter
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
citylinechurch replied on at Permalink Reply
Thanks for this information too.
Jupiter replied on at Permalink Reply
Jupiter
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
Jupiter replied on at Permalink Reply
Jupiter
I hope this helps..thanks
citylinechurch replied on at Permalink Reply
Thanks Jupiter. I ended up trying the other method above and it worked fine. But thank you nevertheless.