• Resolved dontknowmuch

    (@dontknowmuch)


    Hi guys,

    Just a simple question, how can i replace the demo banner image and text? I can hide it in the customizer options, but i want to display another image and text in the same way like this demo banner because it looks great. Can you help me? thnx in advance!

Viewing 15 replies - 1 through 15 (of 24 total)
  • where is your demo?

    Thread Starter dontknowmuch

    (@dontknowmuch)

    Got is on displaying “coming soon”, but i mean the demo banner that comes with the theme, like dummie content. Ik want to replace that banner?

    Theme Author Shaped Pixels

    (@shaped-pixels)

    Sorry for late reply…just starting my day here.

    You already know how to disable the demo one, so that is the first step ??
    To make the same kind of banner with caption, but with your own, follow this setup tutorial:

    Banner with Caption

    Theme Author Shaped Pixels

    (@shaped-pixels)

    I wanted to follow up and find out if you were able to create your own banner with caption?

    Thread Starter dontknowmuch

    (@dontknowmuch)

    Thnx a lot, great support again! It worked well and easy with the tutorial and it looks great! I only want to change some little things and I can’t get in to the code again with the text/banner widget after saving it? Do i have to go to the editor now? thnx in advance!

    Theme Author Shaped Pixels

    (@shaped-pixels)

    You’re very welcome ??
    As for making some style changes, it’s best to do this with a custom stylesheet using a plugin like Simple Custom CSS. What was it you were wanting to change?

    Thread Starter dontknowmuch

    (@dontknowmuch)

    Great, i’ll try the plugin. The title is still displaying. I called it ‘!Front Page Banner’ but i think i need a plugin to simply hide the title.
    And i was thinking about only displaying the banner at the homepage, now it is showing on all pages.

    Thnx in advance!

    Thread Starter dontknowmuch

    (@dontknowmuch)

    And i’am trying to find the text in the code. I’m using chrome and the ‘inspect element’ function. But how exactly can i see now in wich template i will find it? Now i’m just searching trough a lot of code, not knowing what the easy way is?

    Theme Author Shaped Pixels

    (@shaped-pixels)

    To hide the title, use a plugin Remove Widget Titles and then to publish it on select pages, Display Widgets

    Widget Titles Tutorial

    Show Widgets on Select Pages

    Theme Author Shaped Pixels

    (@shaped-pixels)

    What text part were you wanting to customize and to change it how?

    Thread Starter dontknowmuch

    (@dontknowmuch)

    Just the outlining, so a part of the text had to come on the second line instead of the first. And thnx a lot for the tutorials, gonna start with them now!

    Thread Starter dontknowmuch

    (@dontknowmuch)

    And the other text a wanted to change is the title of the website. Now it’s displaying over the header image and i don’t want that, but i’m having a little bit trouble finding the website title in the stylesheet..

    Theme Author Shaped Pixels

    (@shaped-pixels)

    I thought I would follow up here before I call it a night (12:30am)

    The styling for the caption box in the theme looks like this:

    .banner-caption {
        width: 90%;
        padding: 10px 20px;
        background-color: rgba(0,0,0,0.30);
        text-align: center;
        font-family: Serif;
        font-size: 1.5rem;
        line-height: 1.4;
        font-style: italic;
        color: #fff;
        letter-spacing: 1px;
    }
    .banner-caption span {
    	font-family: arial, helvetica, sans-serif;
    	font-style: normal;
        font-size: 0.75rem;
    	text-transform: uppercase;
    }

    I’ve left some out of the code, but what you see will allow you to create some custom CSS to override any of the caption box styling.

    For the site title, this is found around line 379 of the style.css and looks like this, where the font size is set for small screens at 2.5rem:

    .site-title {
    	padding: 10px 0;
        font-family: "Old Standard TT",Georgia,Serif;
    	font-size: 2.5rem;
    	line-height: 1;
        text-align: center;
    }

    So any adjustments you make can be done once again doing some custom CSS for the class .site-title

    Please note though that the font size of the site title does change with media queries for different screen sizes. This is one:

    @media (min-width: 768px) {
    	.site-title {
       	 	font-size: 3rem;
    	}
    }

    This is two:

    @media (min-width: 992px) {
    	.site-title {
       	 	font-size: 4.75rem;
    	}
    }

    Incidentally, I use rem as font size which you can use this site tool for reference. https://www.pxtoem.com (it shows em’s but use it the same for rem’s)

    Thread Starter dontknowmuch

    (@dontknowmuch)

    I hope you have a good night and thnx a lot, gonna work with it! Over here just starting in the morning…
    Having some trouble with the banner visibilaty. Using the JP widget visibilaty plugin and now i’m getting the option in the banner widget. But the text widget i dragged to the banner widget is gone. But the banner is still displaying. When I open the banner widget it only says “For images and sliders” and i don’t get the checkboxes of the jp widget visibilaty plugin. Any idea maybe?

    Theme Author Shaped Pixels

    (@shaped-pixels)

    It sounds like there’s a problem with the plugin you are using. My suggestion is to use the Display Widgets plugin, not the JP one…especially because it looks like it’s being retired when I went to their plugin page.

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘replace demo banner image’ is closed to new replies.