WordPress.org

Ready to get started?Download WordPress

Forums

Responsive
Can't change main area on homepage (7 posts)

  1. sallysqueak
    Member
    Posted 11 months ago #

    I've only been using wordpress for a week, so very new, but how can I change the large main box on the homepage at Bookabrainbreak.com ?

    I'm talking about the one which at the moment shoes 'book your perfect holiday' along with pics of cocktails and a blue button.

    I want to display a world map to spread across the whole box, remove the text and add a couple of search boxes in there. Can this be done? If so how, is there a way to use a wysiwyg editor in there? I'm struggling to even find out which widget this is. The only way I can seem to change it is in the theme options and that's just plain text and keeps the image to the right.

    Thanks

  2. W.P. Ginfo
    Member
    Posted 11 months ago #

    Yes, this can be done.
    It might tak a bit ;) of work ;)
    To give you a bit of an idea /start...
    == == ==
    To make these kind of changes means changing HTML, style.css and php-files.

    Add the following code to the `style.css' of your CHILDtheme:

    .featured-title, .featured-subtitle, #featured p {
       display: none;
    }
    #featured img {
        border: 0px none;
        height: auto;
        vertical-align: middle;
        width: 1024px;
        float: right;
    }
    .call-to-action a.button {
        font-size: 24px;
        padding: 15px 35px;
        position: relative;
        margin-top: 825px;
        float: left;
    }

    You don't have a childtheme yet?

    1. Install and activate 'one click childtheme plugin
    2. create the childtheme
    3. activate the childtheme
    4. Make the changes in the CHILDtheme!
    - copy php files / css-file(s) of the original theme [as required] to the childtheme directory and edit them as required.

    == == ==
    DON'T FORGET

    Make regular backups! Make sure you make a backup before you make any changes, so you have a way to restore things...
    http://codex.wordpress.org/Getting_Started_with_WordPress
    http://codex.wordpress.org/CSS
    http://codex.wordpress.org/Finding_Your_CSS_Styles
    http://codex.wordpress.org/FAQ_Troubleshooting

  3. sallysqueak
    Member
    Posted 11 months ago #

    Thanks for replying :)

    Wow, sounds complicated! What will doing this leave me with? Sorry, bit confused. Will I then be able to insert what I like where I like into that space?

  4. sallysqueak
    Member
    Posted 11 months ago #

    Right, I've got the child theme installed, not the responsive one as I couldnt find it, but a generic one.

    Now the second part of what you said is completely confusing me.. I can't do css, have no knowledge of it whatsoever, please can you give me some guidance? I've been trying to get this to work for 3 days now and all I want is to be able to see what I'm putting in this area. Can I not use some sort of wysiwyg editor?

    When I pasted the code you gave me into the child theme, the text just disapeared, image remained and button went down the page :( Help!

  5. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 11 months ago #

    Hi sallysqueak, try replacing everything in your (child theme) style.css file with this:

    /*
    Theme Name:     Resp1
    Description:
    Author:         admin
    Template:       responsive
    
    (optional values you can add: Theme URI, Author URI, Version)
    */
    
    @import url("../responsive/style.css");
    
    .featured-title, .featured-subtitle, #featured p {
       display: none;
    }
    #featured img {
        border: 0px none;
        height: auto;
        vertical-align: middle;
        width: 1024px;
        float: right;
    }
    .call-to-action a.button {
        font-size: 24px;
        padding: 15px 35px;
        position: relative;
        margin-top: 825px;
        float: left;
    }
  6. sallysqueak
    Member
    Posted 11 months ago #

    Hi Andrew, have just done what I think your asking of me, and it's resulted in what you can now see on the page.. A mess :(

    I even thought of just adding a slider to this area instead, thinking it would be simpler, and hopefully that would include a search box, but I just can't find a plugin which will do this and have a shortcode available to stick it in the area. I'm so frustrated I could cry right now! Just can't seem to work this out :(

  7. W.P. Ginfo
    Member
    Posted 11 months ago #

    If things did not work out as planned...

    Simply delete the content of the style.css [leave the header including the import... line.
    and start over.

    Finding out 'which things to change in your site [css / html / php] is all a bit like trying to solve a puzzle.
    Fortunately there are good tools for that.
    In your browser: Install / activate webdevelopment add-ons / plugins.

    Recommended: 'Firebug' and 'webdeveloper: http://www.chrispederick.com '
    These tools will show you what's what.
    e.g. right-click > inspect elements > click left bottom arrow-icon
    click item in webpage
    Inspect css on the right
    alter css values to test effect / result
    OK? copy altered css rule
    paste it in the style.css of your childtheme.

    Alternatively:
    Press <F12> a screen will show in the bottom.
    Move the mouse over each line
    The area shows in the top-half
    Press + to unfold parts
    Investigate and alter on the right etc.
    paste it in the style.css of your childtheme.

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.