WordPress.org

Ready to get started?Download WordPress

Forums

Lobster
[resolved] Home Page Widgets (15 posts)

  1. montig
    Member
    Posted 10 months ago #

    I really like the lobster bootstrap theme, but I do not seem to be able to edit the Home Page Widgets, I want to change the text under the big images (telephone, rocket and lens) in the home page, and possibly change the pictures too

    http://wordpress.org/themes/lobster

    http://www.bitcoinmatic.co.uk/

  2. ruphel
    Member
    Theme Author

    Posted 10 months ago #

    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

  3. montig
    Member
    Posted 10 months ago #

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

  4. ruphel
    Member
    Theme Author

    Posted 10 months ago #

    That's great Montig

    If you need help on anything else let me know :)

  5. tusio
    Member
    Posted 9 months ago #

    Hi Ruairi,

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

    Thanks!

  6. ruphel
    Member
    Theme Author

    Posted 9 months ago #

    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 :)

  7. tusio
    Member
    Posted 9 months ago #

    Thanks man, you're a star.

  8. ruphel
    Member
    Theme Author

    Posted 9 months ago #

    Glad I helped :)

  9. grapplerschurch
    Member
    Posted 8 months ago #

    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

  10. ruphel
    Member
    Theme Author

    Posted 8 months ago #

    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

  11. shabeebrizvi
    Member
    Posted 8 months ago #

    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.

  12. ruphel
    Member
    Theme Author

    Posted 8 months ago #

    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 :)

  13. pe4learning
    Member
    Posted 6 months ago #

    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

  14. ruphel
    Member
    Theme Author

    Posted 6 months ago #

    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.

  15. pe4learning
    Member
    Posted 6 months ago #

    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

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.