WordPress.org

Support

Support » Themes and Templates » [Resolved] Home Page Widgets

[Resolved] Home Page Widgets

Viewing 14 replies - 1 through 14 (of 14 total)
  • Theme Author ruphel
    Member

    @ruphel

    Hi Montig

    In your WordPress dashboard on the main menu go to Appearance > Widgets.

    On the far right of the Widgets page you’ll see Widgetized area called ‘Home Page Widgets’.

    What you need to do now is click on this Widget area to open it.

    Next you need locate the ‘Text’ widget – it has a description of ‘Arbitrary text or HTML’ underneath.

    Hover over this widget and you will notice your mouse pointer change to a crossed-arrows symbol.

    Now drag the text widget and place it in the ‘Home Page Widgets’ widgetized area.

    Just as an example copy and paste the code below and paste it in to your text widget,

    <img src="yoursite.com/wp-content/theme/lobster/images/sample1.png" alt="Your Image" class="aligncenter" />
    <h3 class="home-widget-title">Text Widget Header</h3>
    <div class="textwidget">
       <p>Now you'll have to make two more of these!</p>
    </div>

    You can give the widget a title also. The ‘Text’ widget allows you to place custom html markup in to your widget.

    If you save the widget now and look at your homepage you’ll find the original widgets have disappeared. So, you’ll simply have to create another two widgets for your ‘Home Page Widgets’ area.

    Your ‘Home Page Widgets’ will display three ‘Text’ widgets in total!

    So, you can not only change the text in the paragraphs you can change everything!

    Remember to change the image path to whatever image you want to place there.

    I hope this helps 🙂

    Ruairi

    Thanks, it worked! I feel dumb but without help I could never figure it out

    Theme Author ruphel
    Member

    @ruphel

    That’s great Montig

    If you need help on anything else let me know 🙂

    Hi Ruairi,

    How can I change the text colour in the widget area?

    Thanks!

    Theme Author ruphel
    Member

    @ruphel

    Hi Tusio

    Go to your style.dev.css file: (you will have to delete your style.css and then rename your style.dev.css file to style.css to see the changes.)

    The colours you need are all in the ‘Home Widgets’ section, which begins on line: 7358

    Here are the colours you’ll need to change.

    line: 7358 is the link colour.
    color: #fff000;

    line: 7366 is the text colour.
    color: #fff;

    line: 7391 is the widget title.
    color: #fff !important;

    Change there colours and save. Then Delete your style.css.

    Rename style.dev.css to style.css to see your changes 🙂

    Thanks man, you’re a star.

    Theme Author ruphel
    Member

    @ruphel

    Glad I helped 🙂

    grapplerschurch
    Member

    @grapplerschurch

    I’d like to remove that top black header bar. Anyone know how I’d do that.

    Or how to change the font style in the homepage widget?

    Anyone? Thanks in advance 😉

    Scott

    Theme Author ruphel
    Member

    @ruphel

    Hi Grapplerchurch

    First you will need to delete your style.css file. Then rename your style.dev.css to style.css.

    In your new style.css file go to line 3747
    and change
    background-color: #222222;
    to whatever you want your menu’s background colour to be, you should also change the border colour on the line below.

    Then go to line: 6515 to alter the Home Page Widgets

    You’ll probably will want to change lines that begin on line: 6543

    .home-widget {
      margin: 0 0 30px;
      text-align: center;
    }

    to something like:

    .home-widget {
      font-family: your-font, helvetica, sans-serif;
      font-weight: bold;
      margin: 0 0 30px;
      text-align: left;
    }

    Hope this helps

    shabeebrizvi
    Member

    @shabeebrizvi

    Good Job Ruphel. I like the theme but it would have been nice to have links in the setting (dropdown to select from) for pages when clicked on title or images (mobile, rocket and magnifying glass) on the frontpage. And center aligned slider instead left would be a bonus.

    Theme Author ruphel
    Member

    @ruphel

    Hi Shabeebrizvi 🙂

    I will look into providing an option in the theme customizer to change the link color. It wouldn’t be as straight forward as the other color options, but it may be do-able!

    The slider is not mine, I just recommend people to use it with this theme as it’s responsive and been a Bootstrap slider means people won’t have to load more css and js files.

    Sliders often use ‘float-left’ so users can upload images to suit the sliders width!

    Again, thank you for your feedback and I’ll see what I can do about the link colors.

    All the best

    Ruairi

    If you need anymore info let me know 🙂

    pe4learning
    Participant

    @pe4learning

    Hi Ruphel,

    Is there a way to change to size of the widget area. I love the 3 images with text links underneath, however the widget area dominates the page for me and I was just wondering if were possible to change to size of the space the 3 images sit in? Its ok if this cant be done, just checking before I mess it all up by tinkering!

    Thanks

    Paul
    http://www.pe4learning.com

    Theme Author ruphel
    Member

    @ruphel

    Hi Paul

    The easiest way to deal with that Paul would be to create your own Front Page Temeplate:

    http://wordpress.org/support/topic/adding-content-below-the-widget-on-the-front-page?replies=5

    The best thing about creating your own front page template is that you have the same control over the CSS / html markup as you would with a static website.

    pe4learning
    Participant

    @pe4learning

    Ruphel,

    Thanks ever so much for the hint! I shall investigate and get stuck into it.

    Thanks ever so much for the reply,

    Best regards

    Paul
    http://www.pe4learning.com

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘[Resolved] Home Page Widgets’ is closed to new replies.