Home>Support>Headline Widget customization

Headline Widget customization

By Beppe Rubino, 9 years ago. Last reply by Daniel, 9 years ago.

Hi,
I’d like to know if there is the chance to entry a single Custom CSS override that can involve every kind of font custumization, in detail:
– Font size
– Font Type
– Font Color
– Line alignement (when I insert a text in a half row, I’d like to be free to allign it at SX for istance)
– Room between the lines. The H1 line are very close when I go to the head.
– Big Issue. I want To be able to turn into the uppercase on the H1 in lowercas. I followed the intraction you gave to onother user, but it didn’t work.
Thanks a lot
Giuseppe

URL: http://redh.it/epta

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 7 months ago Daniel
    Hi, I Work Here

    Hi Beppe Rubino

    First of all I apologize for the delayed response.

    You can fix/change all that with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor.

    Kindly let me know the exact areas you want adjusted, so that I try get you a tested CSS. ( A highlighted screenshot would help a lot)

    Looking forward to hear from you :)

  2. 9 years, 6 months ago Beppe Rubino

    Hi Addo,
    thank you for your reply and don’t worry about delay…..
    I solved with the issue no trought the insert of custom Css to change size features of various Title (from 1 to 6), but simply using TinyMCE editor advanced. In this way I override the fixed sizes of Title, using paragraph syle and then changing the Font type, size , color etc.
    In this way, I can use exactly the dimension that I need to emphasize some part of my webpage.
    But now I have another issue. I have seen that I can’t change the room between the line, so when I use a big font size , the line are too stick. There are a solution to get more room directly in AdvancedTinyMCE? (I didn’t found it.);)
    Otherwise, what is the best way to get it? If the best way was to insert custom CCS, this should change the room in each paragraph around the site , shoudn’t it? Or I can change the room just in one page, leaving the rest as default?

    I hope that my request is clear;)
    Looking forward to hearing from you
    Best
    Giuseppe

  3. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Hi Giuseppe

    If you insert the following under Appearance > Custom CSS you should be able to completely customise the Headline Widget as required:

    /* Headline Widget */

.widget_headline-widget h1 {
color: #444444;
font-size: 26px;
letter-spacing: 1px;
line-height: 36px;
margin: 0;
padding-top: 20px;
text-transform: uppercase;
}

.widget_headline-widget .decoration {
position: relative;
height: 1px;
border-top: 1px solid #EEE;
margin: 20px 60px 20px 60px;
}

.widget_headline-widget h3 {
color: #666666;
font-size: 14px;
font-weight: 200;
margin: 0;
padding-bottom: 20px;
}

    Let me know how that goes.

  4. 9 years, 6 months ago Beppe Rubino

    Hi Andrew,
    thank you very much for your answer that surley will be usefull for my next project. However, I have already solved my issue as I wrote in my previous post and it work very well…….it get me satisfy about it.
    I’d apreciate if you can help me about the previous post that it wasn’t refer to Headline widget but how can I set the room between the lines whey I wrote a paragraph with TinyMce Advanced, they are so sticky !:)
    Thanks again for your support
    Best
    Giuseppe

  5. 9 years, 6 months ago Daniel
    Hi, I Work Here

    Hi Beppe Rubino

    You can change this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.

    .textwidget p { 
line-height: 2em !important;
}

    Your can adjust the 2em to a figure of your choice

    Try that out

    Cheers

  6. 9 years, 6 months ago Beppe Rubino

    Hi,
    your advice works very well !. Thank you very much
    Just another clarification Can I set the previous figure for each part of text widget? For example: a line height for Title 1 , other one for Title 2,…….to Title 6) and other line hight for paragraph
    Thanks a lot
    Best
    Giuseppe

  7. 9 years, 6 months ago Andrew Misplon
    Hi, I Work Here

    Sure, that would be:

    .textwidget h1 { 
line-height: 2em !important;
}

.textwidget h2 { 
line-height: 2em !important;
}

.textwidget h3 { 
line-height: 2em !important;
}

.textwidget h4 { 
line-height: 2em !important;
}

.textwidget h5 { 
line-height: 2em !important;
}

.textwidget h6 { 
line-height: 2em !important;
}

.textwidget p { 
line-height: 2em !important;
}

    Edit as required.

  8. 9 years, 6 months ago Beppe Rubino

    Hi Andrew,
    thank you very much for your prompt reply…It's great!
    Best

    2015-03-10 10:42 GMT+01:00 Andrew Misplon <
    forum+8876-u18675-79d69063a67ca13c64f55c1868c1b7a8d125cc89@siteorigin.com>:

  9. 9 years, 6 months ago Daniel
    Hi, I Work Here

    Perfect :-)

    Always feel free to open a new thread whenever you require support

    Cheers

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More