WordPress.org

Ready to get started?Download WordPress

Forums

Montezuma
[resolved] Social media on top right Montezuma (20 posts)

  1. Zaralene
    Member
    Posted 5 months ago #

    I am using Montezuma and want to add my social media icons on the top right, instead of in a widget. Does anyone know how I can achieve that?
    This is my site: http://creacont.nl/

  2. ellp
    Member
    Posted 5 months ago #

    Hello again :)

    Well, is not so easy to do it. To do that you will have to modify the header.php file, adding all links manually. After that you will need to style them using CSS.

    But, you will have a problem. Your theme is responsive. It will be necessary a solution to display (or hide) those icons from your mobile visitors.

    Hope it helps.

    Evandro

  3. CrouchingBruin
    Member
    Posted 5 months ago #

    @Evandro, it is actually quite easy to do in this theme, as the theme uses virtual template files that are easily accessible from the theme's options pages. You should try installing the theme to take a look.

    @Zaralene, which social media plugin are you thinking of using? Lots of developers have been using Shareaholic with Montezuma fairly successfully. If the plugin needs to go into a widget, you can create a widget area in the header.php sub-template (Appearance > Montezuma Options > Sub Templates > header.php). You'll want to create a widget area by inserting this code line:

    <?php dynamic_sidebar( 'Widget Area SOCIAL' ); ?>

    Take a look at the page.php Main Template to see how that works. Once you define your new widget area, you'll be able to drag your social widget into by going to Appearance > Widgets.

  4. Zaralene
    Member
    Posted 5 months ago #

    Thank you Evandro, I am taking Crouchings advice on this one: I installed Shareaholic and insert the code line into the header.php area where I want them. Then I took a look at the page.php but couldn't find it there (widget area ONE was present there), what should I look for exactly? First I inserted the code line there as well, but that didn't give changes and I took it away again.
    Then I went to the Widgets in appearance. I can see the new Social widget area there, I can also drag things in there like a picture or a text or something. However not the social media plugins because there is not a special widget for it that I can drag into the social media area.
    I have a code for them to insert anywhere, but I have no clue how to add that to this widget. What do I do wrong? I hope my crappy English makes sense.

  5. Zaralene
    Member
    Posted 5 months ago #

    Update: I added a different social media plugin, acurax, and so I could test how it actually looks. As you can see it doesn't look okay. For some reason they ends up in places where I don't want them. When I define outline to either left, center or right it also doesn't work.
    I tried every line in the header but none of them work. They won't go to the right, I want them about the same location as the widgets, only in the header.
    Put them now under breadcrumbs on the right, but also that is not good. :(
    http://creacont.nl/

  6. CrouchingBruin
    Member
    Posted 5 months ago #

    As long as you get it into the general area, you can fine tune it using CSS. Is in the breadcrumbs bar where you want it, or do you want it up above, but to the right, in line with the menu bar?

  7. Zaralene
    Member
    Posted 5 months ago #

    Yes, I want it in line with the menu bar, above the sidebar. Just above that thin line.

  8. CrouchingBruin
    Member
    Posted 5 months ago #

    How exactly is the social media buttons being added to the header? Is there a shortcode that you paste in, or did you create a widget area in header.php?

    And can you provide a link to the plugin so I can try installing it myself? Is it this one?

  9. Zaralene
    Member
    Posted 5 months ago #

    Yes that's the one. But actually I do not have a preference for one specific social media plugin, as long as it works I am fine with it. I just couldn't get the other one to work that you recommend.
    You install the plugin and then adjust the settings. Then you go to the widget area and drag it into the area you want. I chose this one because it has many options for the icons.
    I created the widget area in the header.php just like you said. Then I went to the widget area and there it was, so I only had to drag the acurax inside it.

    Here is the complete code for the header.php:

    <div id="banner-bg" class="cf">
    <div id="banner" class="row">
    <div id="logo-area" class="col5">

    <img src="http://creacont.nl/wp-content/uploads/2014/03/logo-trendpersmixmedia-web2.png"/>

    <<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">
    "><?php bloginfo( 'name' ); ?></a
    <p id="tagline"><?php bloginfo( 'description' ); ?></p>
    </<?php bfa_if_front_else( 'h1', 'h3' ); ?>>
    </nav>
    <?php wp_nav_menu( array(
    'container' => 'nav',
    'container_class' => 'menu-wrapper col7',
    'container_id' => 'menu1-wrapper',
    'menu_id' => 'menu1',
    'menu_class' => 'cf menu',
    'theme_location' => 'menu1',
    'fallback_cb' => 'bfa_page_menu'
    ) ); ?>
    </div>
    </div>
    <div id="breadcrumbs1-bg">
    <nav id="breadcrumbs1" class="breadcrumbs lw">
    <?php bfa_breadcrumbs( 'breadcrumbs1' ); ?>
    <?php dynamic_sidebar( 'Widget Area SOCIAL' ); ?>
    </div>

  10. CrouchingBruin
    Member
    Posted 5 months ago #

    Thanks for the code, but can you try again but this time put backticks around it? Otherwise the formatting gets lost. The backtick key should be to the left of the number 1 key on your keyboard, and will have a tilde (~) above it. Or you can also copy the code into a Pastebin and post a link to it here.

  11. ellp
    Member
    Posted 5 months ago #

    CrouchingBruin,

    Definitely I will install this theme to check it out... Thanks for the tip :)

    Evandro

  12. Zaralene
    Member
    Posted 5 months ago #

    <div id="banner-bg" class="cf">
    	<div id="banner" class="row">
            		<div id="logo-area" class="col5">
               <a href="http://www.creacont.nl">
    <img src="http://creacont.nl/wp-content/uploads/2014/03/logo-trendpersmixmedia-web2.png"/>
    </a>
    			<<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">
                				<a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a
                <p id="tagline"><?php bloginfo( 'description' ); ?></p>
                 		</<?php bfa_if_front_else( 'h1', 'h3' ); ?>>
    				          </nav>
              <?php wp_nav_menu( array(
    			'container' => 'nav',
    			'container_class' => 'menu-wrapper col7',
    			'container_id' => 'menu1-wrapper',
    			'menu_id' => 'menu1',
    			'menu_class' => 'cf menu',
    			'theme_location' => 'menu1',
    			'fallback_cb' => 'bfa_page_menu'
    		) ); ?>
      </div>
    </div>
    <div id="breadcrumbs1-bg">
            	<nav id="breadcrumbs1" class="breadcrumbs lw">
           <?php bfa_breadcrumbs( 'breadcrumbs1' ); ?>
          <?php dynamic_sidebar( 'Widget Area SOCIAL' ); ?>
      	</div>
  13. Zaralene
    Member
    Posted 5 months ago #

    I hope this will work then.

  14. CrouchingBruin
    Member
    Posted 5 months ago #

    Great, that's perfect. I forgot to tell you that you needed to put a DIV around the call to dynamic_sidebar().

    Anyway, give this code a try:

    <div id="banner-bg" class="cf">
    
       <div id="banner" class="row">
          <div id="logo-area" class="col12">
             <a href="http://www.creacont.nl">
                <img src="http://creacont.nl/wp-content/uploads/2014/03/logo-trendpersmixmedia-web2.png"/>
             </a>
             <<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">
                <a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>
                <p id="tagline"><?php bloginfo( 'description' ); ?></p>
             </<?php bfa_if_front_else( 'h1', 'h3' ); ?>>
          </div>
       </div>
    
       <div id="rowNav" class="row">
          <?php wp_nav_menu( array(
             'container' => 'nav',
             'container_class' => 'menu-wrapper col7',
             'container_id' => 'menu1-wrapper',
             'menu_id' => 'menu1',
             'menu_class' => 'cf menu',
             'theme_location' => 'menu1',
             'fallback_cb' => 'bfa_page_menu'
             ) ); ?>
    
          <div id="widgetarea-social" class="col5">
             <?php dynamic_sidebar( 'Widget Area SOCIAL' ); ?>
          </div>
      </div>
    </div>
    
    <div id="breadcrumbs1-bg">
       <nav id="breadcrumbs1" class="breadcrumbs lw">
           <?php bfa_breadcrumbs( 'breadcrumbs1' ); ?>
       </nav>
    </div>

    The header is arranged in three different rows. The first row has an id of banner and contains the logo, the site title, and the tag line.

    The second row has an id of rowNav. Remember from the documentation in Appearance > Montezuma Options > CSS Settings > Editing CSS that the theme is based on a 12 column grid in order to make it responsive. What that means is that elements that are within the same row have to line up on column widths that add up to 12 in order for the responsiveness to work correctly. So in this row, there is the menu on the left and the widget area on the right. You'll see that the nav menu has a class of col7 assigned to it, meaning that it will span across 7 columns, while the new Social widget area is enclosed by a DIV with an id of widgetarea-social and a class of col5, so it spans across 5 columns (again, apologies for not letting you know that the widget area needed to be enclosed within a DIV). If the widths of either area need to be adjusted, you would do it by changing the col# class that's assigned to it, so if your menu needs to be wider, you can set it to col8 or col9 and then make a corresponding change by shrinking the social widget area to col4 or col3.

    The last row is the breadcrumbs row.

  15. CrouchingBruin
    Member
    Posted 5 months ago #

    You may also need to add a float: left; to #menu1-wrapper in your CSS.

    By the way, I really like your menu icons, very creative.

  16. Zaralene
    Member
    Posted 5 months ago #

    I still don't understand where every column is. I try to make a picture of it for myself but so far no luck. I mean, where is col12 and where is col 1? I do understand the 3 rows and I also understand that left is 217px, center 594px and right 149px.
    It would be helpful if there was a picture/drawing of how the grid is build up.
    Anyways, I made all the changes you said and it is already much better! You are a gem to help me out so much. I put the social media on col4 instead of 5. How can I lower it until it's on the same level of the menu titles (home, contact etc).

    By the way, i get this message all the time:
    "Your theme needs to be fixed for plugins to work. To fix your theme, use the Theme Editor to insert <?php wp_head(); ?> just before the </head> line of your theme's header.php file."

    So I had a look in my header.php and cannot find this </head>. Do you have any clue?

    As for the menu icons, thanks for the compliment. I am a Photoshop specialist with an experience of 14 years. If I can help you with something design wise just let me know. I will be happy to make something for you in exchange for all the help you already have given me.

  17. CrouchingBruin
    Member
    Posted 5 months ago #

    It would be helpful if there was a picture/drawing of how the grid is build up.

    It is helpful to think of the column classes as widths, rather than absolute positions. The 12 column grid is 960px wide, so each column is 80px (960 / 12). The 80px is somewhat approximate, depending upon how big a margin (space) you specify between columns when you select your grid (Appearance > Montezuma Options > CSS Settings > Choose CSS Grid).

    An element with a class of col4 will therefore be 4 x 80 = 320px wide, an element of class col7 will be 7 x 80 = 560px wide. So the position of any element will depend up on the width(s) of the elements to the left. As I mentioned earlier, the important thing is to make sure the column classes add up to 12, so the entire width ends up being 960px.

    This allows for a lot of flexibility in designing your layout. For example, if you wanted a sidebar on the left as well as on the right, you could design a virtual template by copying the page.php template and change it so it looks like this:

    <div id="widgetarea-left" class="col3">
       <?php dynamic_sidebar( 'Widget Area LEFT' ); ?>
    </div>
    <div id="content" class="col6">
       [the code for the main content]
    </div>
    <div id="widgetarea-one" class="col3">
       <?php dynamic_sidebar( 'Widget Area ONE' ); ?>
    </div>

    The two sidebars would be 3x80=240px wide and the main content area would be 6x80=480px wide, for a total of 960 (240+240+480).

    I put the social media on col4 instead of 5. How can I lower it until it's on the same level of the menu titles (home, contact etc).

    You will want to adjust the class of your menu bar to col8, then, so the widths still add up to 12. That will also help align the social buttons above the widget area, as the menu will then be the same width as the main content. If the media buttons are too far to the right, you can adjust it with this CSS:

    #acx-social-icons-widget-4 {
        float: left;
        margin-left: 20px;
        margin-top: 25px;
    }

    The float: left property will push the buttons all the way over to the far left of the container, as a starting point. Then use the margin-left and margin-top properties to adjust how far you want to move the buttons to the right and down.

    You also want to add a media query that re-centers the buttons on smaller viewport sizes:

    @media only screen and (max-width: 767px) {
    #acx-social-icons-widget-4 {
           float: none;
           margin-left: 0px;
       }
    }

    As a note, you want to learn how to use a web debugging tool like Firebug or Chrome Developer Tools (I use mostly Chrome DevTools). It will help you figure out what CSS rules are in effect for a particular element so you can override them. It's what I use to look at your site.

    By the way, i get this message all the time:
    "Your theme needs to be fixed for plugins to work...

    Do not worry about this warning message. Unfortunately, some plugins don't realize that header.php isn't the only place where wp_head() can be called. wp_head() is being called, but not from the virtual header.php file. You can ignore this warning.

    If I can help you with something design wise just let me know.

    Thank you for your offer, I might take you up on it some day. I like helping people out with this theme, because I think it is the best theme as far as being able to customize it. If you wish to look at how some others are using the theme, you can browse through the sites at the BytesForAll Showing-off thread. My favorite examples right now are Silver Lake Art Garage, Raise A Child, Cartidea, Mondo Moda Bimbo, Rishona Campbell, and Beard Food. It's a very diverse collection that illustrates how much you can do with the theme.

  18. Zaralene
    Member
    Posted 4 months ago #

    Thanks for explaining the grid, it makes a lot more sense now. I use Firebug all the time, but sometimes I still can't figure out things with it because there are so many stylesheets. The more I work with this theme though, the better I understand but there is alas a lack of knowledge with me when it comes to CSS (working on that).
    I adjusted the social media icons now, it is better but I am not able to shove them more to the left, so I suppose I just leave it like this and start working on the design now, because there is also a lot to do there :)
    As a member of Bytes For All I take a peek sometimes at what others make. You to me are a wizard with all the solutions you mention. I do like the examples of websites you mentioned, it is surely fantastic what people can do with this versatile theme especially Silver Lake Art and Beard Food. Thanks again for your help!

  19. CrouchingBruin
    Member
    Posted 4 months ago #

    I use Firebug all the time, but sometimes I still can't figure out things with it because there are so many stylesheets.

    If you look at the CSS in the right pane of the FireBug window, you'll see that the rules are arranged according to their selector's specificity; the rules which have the highest specificity appear at the top. It's usually not necessary to know exactly which CSS file contains the rule, unless that file happens to be read in after your custom CSS; then you'd have to create a selector with a higher specificity. But if you do want to see in which file a rule is located, click on the link to the right of the rule (e.g., style.css:1317) and FireBug will switch to the Style Editor, opening up the correct file (style.css) and displaying the line (1317) where the rule is located. If you want to switch back to the code, click the Inspector menu item.

  20. Zaralene
    Member
    Posted 4 months ago #

    Fantastic tip Crouch! Thanks :)

Reply

You must log in to post.

About this Theme

About this Topic