Support » Themes and Templates » GL Items (GLASS) widget – Stained Glass theme – change font size?

  • opus2727

    (@opus2727)


    How can I change the size of the font in GL Items (GLASS) in the Stained Glass theme? Thanks!!! It’s just too huge and I have spent 4 hours on this problem already.

Viewing 12 replies - 1 through 12 (of 12 total)
  • mrtom414

    (@mrtom414)

    are you wanting to change the font family or change the size of the font. Changing the font size can be done with a custom css plugin. You would simply apply the css attribute font-size:<<desired size>> to each of the elements you want change. If you wanted to change the tab font size you would use this statement.

    
     .wide .column-3 .element .entry-title {
        font-size: 1.1vw;
    }

    This theme uses media queries to change the size of the font at different screen views. You would have to change the size in each media view.

    To change the font family you would have to create a child theme and dequeue the style then re enqueue the new style back. The theme uses google fonts This would have to be done in the functions.php file. This would require a little bit of php programming. You will need to be a little more specific on which task you want to accomplish. Change the font-size will be far easier than changing the font-family.

    opus2727

    (@opus2727)

    I want to decrease the size of the font in “ABOUT SHOP PORTFOLIO”. Here is a screenshot:
    http://www.sonicmediainc.com/stainedglass2.jpg

    Tahoerock

    (@tahoerock)

    Hi opus2727,
    little update:
    put this code to your Child Theme style.css file
    OR
    Install Simple Custom CSS plugin and put the code there.
    I’m doing this on my browser to find solution.
    It can get to some different behavior on your site.
    It can happen that it is not working.
    Then we have to look further.

    .wide .element .entry-title {
        font-size: 3vw;
    }
    
    or
    
    .wide .element .entry-title {
        font-size: 3vw!important;
    }

    Cheers
    TR

    • This reply was modified 4 years ago by Tahoerock.
    opus2727

    (@opus2727)

    Thank you mrtom414 and Tahoe Rock! I know where the main css is – but I don’t know if there is a child theme. I know very little about CSS to be honest. I’m old. I miss the days of html and Dreamweaver. 🙂

    The web site url is: http://www.sarahcopus.com/

    Tahoe Rock thanks for the plugin. I’ll try that.

    opus2727

    (@opus2727)

    It Worked!! Thank you mrtom414 and Tahoe Rock!!! I installed the plugin Simple Custom CSS and added
    .wide .column-3 .element .entry-title {
    font-size: 1.1vw;
    }

    You guys are great!

    opus2727

    (@opus2727)

    Would this same plugin be able to delete the file-folder-tab looking element (the one containing the site title) and just have the header photo with the site title?

    Tahoerock

    (@tahoerock)

    Hi Opus,

    put this code to your Child Theme style.css file
    OR
    Install Simple Custom CSS plugin and put the code there.
    I’m doing this on my browser to find solution.
    It can get to some different behavior on your site.
    It can happen that  it is not working.
    Then we have to look further.

    .element-wrap {
        background: transparent;
        -webkit-box-shadow: transparent;
        -moz-box-shadow: transparent;
        box-shadow: transparent;
    }
    
    or
    
    .element-wrap {
        background: transparent!important;
        -webkit-box-shadow: transparent!important;
        -moz-box-shadow: transparent!important;
        box-shadow: transparent!important;
    }

    OR

    .element-wrap {
        background: transparent;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    
    or
    
    .element-wrap {
        background: transparent!important;
        -webkit-box-shadow: none!important;
        -moz-box-shadow: none!important;
        box-shadow: none!important;
    }

    If you want to change color of the Title then do this:

    .site-title a {
        color: white;
    
    or
    
    .site-title a {
        color: white!important;
    }

    Change color to your taste

    ScreenShot
    Cheers
    TR

    • This reply was modified 4 years ago by Tahoerock.
    opus2727

    (@opus2727)

    I LOVE the way you made it look! However when I added the code to my “Custom CSS”, it only affects the tagline. How did you get it to erase the box behind the site title? sarahcopus

    Here is some CSS in the main CSS page. Does it have something to do with ?
    .element-wrap {
    background-color: rgba(255,255,255, 0.8);
    border-radius: 20px 20px 0 0;
    bottom: 0;
    -webkit-box-shadow: -1px 6px 78px 6px rgba(138,123,138,1);
    -moz-box-shadow: -1px 6px 78px 6px rgba(138,123,138,1);
    box-shadow: -1px 6px 78px 6px rgba(138,123,138,1);
    display: inline-block;
    left: 0;
    overflow: hidden;
    position: absolute;
    margin-right: 50%;
    margin-left: 10px;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    width: 40%;
    }

    • This reply was modified 4 years ago by opus2727. Reason: added code from main css
    Tahoerock

    (@tahoerock)

    Hi,
    ADD THIS CODE TO THE BOTTOM of your Child Theme style.css file
    OR
    Install Simple Custom CSS plugin and put the code there.
    I’m doing this on my browser to find solution.
    It can get to some different behavior on your site.
    It can happen that  it is not working.
    Then we have to look further.

    .site-title, .element-wrap {
        background: none;
    }
    
    or
    
    .site-title, .element-wrap {
        background: none!important;
    }

    AND for Header text:

    .site-title a {
        color: white!important;
    }

    Hope this time it will work. 🙂
    Cheers
    TR

    PS: DO NOT PUT THE CODE HERE WITHOUT PROPER MARKINGS 
    CHOOSE THE CODE AND WRAP IT WITH code wrapers 
    use <strong>CODE</strong> button to wrap any code
    • This reply was modified 4 years ago by Tahoerock.
    • This reply was modified 4 years ago by Tahoerock.
    opus2727

    (@opus2727)

    I added it to the Custom CSS. It did not work.

    I’m not sure what your PS means?

    Thank you for trying. It’s a tenacious problem!

    Tahoerock

    (@tahoerock)

    Hmmm,
    that is interesting.
    It is working here, without any problem.
    OK
    put this code to your Child Theme style.css file
    OR
    Install Simple Custom CSS plugin and put the code there.
    I’m doing this on my browser to find solution.
    It can get to some different behavior on your site.
    It can happen that  it is not working.
    Then we have to look further.

    TRY THIS CODE:

    .element.effect-18 .hover, .element.effect-18 .entry-title, .element.effect-17 .hover, .element.effect-17 .entry-title, .site-title, .element-wrap {
        background: transparent;
    }
    
    or
    
    .element.effect-18 .hover, .element.effect-18 .entry-title, .element.effect-17 .hover, .element.effect-17 .entry-title, .site-title, .element-wrap {
        background: transparent!important;
    }

    Cheers
    TR

    opus2727

    (@opus2727)

    You are so nice to not give up on this! I’ve about given up. Here is the result:
    http://www.sonicmediainc.com/tab.jpg

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘GL Items (GLASS) widget – Stained Glass theme – change font size?’ is closed to new replies.