Wordpress Themes - WP Forum at BFA - [SOLVED] Modify Responsive Desktop View

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)

- - [SOLVED] Modify Responsive Desktop View (http://forum.bytesforall.com/showthread.php?t=22749)

[SOLVED] Modify Responsive Desktop View

I need to modify the responsive "Desktop View" to make the Post/Page Container and Header containing the title, tag and menu wider but leaving the Widget Area One it's stock dimensions.

I want to keep the title font the same size without the text wrapping. I want to keep the dual color used wherever the Yanone Kaffeesatz typeface shows up.

I also want to switch the font used for the tagline to another Google font.

I found the title and tagline before but I can't remember which CSS they are in.

Can anybody help a sister out here?

Thank you.

look in MTO->CSS Files->various.css

Quote:

Originally Posted by juggledad (Post 110014)

look in MTO->CSS Files->various.css

Thank you, as soon as I saw the name I could see a picture of it in my head.
What about changing the width of the Desktop Post/Page Container without messing up the Responsive features? I want to leave the Widget Area One the same but make the Post/Page Container at least a couple of hundred pixels wider.

Is this what I uncomment and use to increase the size of the container for Post/Page text?
What are the approximate values I should start with if it is?

HTML Code:

#container {

        display: table;

        -moz-box-sizing: content-box; 

        -webkit-box-sizing: content-box; 

        box-sizing: content-box;        

        -o-box-sizing: content-box;        

        margin: 0 auto;

        box-shadow: 0 0 30px -20px #999;

        border: solid 1px #ddd;

}

you have to start thinking in columns. There are 12 columns you can use. Your header area can have a different breakup of the columns than the middle area or the footer but they all have to have 12 columns.

In the default settings, the header is sub-divided into two sections (see MTO->Sub template->header.php) the banner and the breadcrumbs.

- the banner area is the full width of the page and split into two parts - the logo area (5 columns) and the menu (7 columns) 5+7=12
- The breadcrumb is set to a width of 960px (by the 'lw' class) which is why the background spans the page but the breadcrumb is width is not full page

The middle is a row where the 'content' area is 8 columns and the widget area is 4 columns (see MTO->Main template->index.php)

The CSS Grid columns have predefined widths so you don't want to mess with then. You should read the section MTO->CSS Editing so you can get a feel for what you can do in a responsive design.

Ok I understand. Thanks for the pointers and the homework. As for the title, instead of trying to change the stock width I've modified the title itself.

Now I'm trying to figure out how to include the bitmap logo along side the title. The logo is currently displayed at 150px square. It looks ok as small as 100 but below that looks kind of crappy. How can I insert the logo so that it vertically spans from the top of the breadcrumbs to the bottom of the black WordPress menu bar.

How do I push the title and tagline over to the right and insert the logo?

Here is a mockup of what I mean.
http://kitsu.org/images/2015.header-mockup.png

If you want the logo in the same row you need to put it in the header.php in the same row and decide how many of the 12 available columns it will use and then reduce the number of columns from of the other two items in that row.

I understand what you are saying in principle but I don't know anything about programming in php. I'm learning as I go along right now. I have some html and css kung fu and not enough of that to brag about. Let's see, I'm cramped for space with the sitetitle already so the menu will have to give up two columns right? Each column is 80 pixels wide so with a 100px logo I would need to steal two columns? Is there a way to do incremental or part of a column in this case? What would the declaration appear like for inserting an 100px square bitmap immediately preceding the sitetitle? I'm assuming that it would somehow be inserted in between logo-area and sitetitle? Am I right in removing two from menu-wrapper col7 and making it col5?

PHP Code:


		
			
        <div id="logo-area" class="col5">

                    <Here>

            <<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">

                <a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>

            </<?php bfa_if_front_else( 'h1', 'h3' ); ?>>

            <p id="tagline"><?php bloginfo( 'description' ); ?></p>

        </div>

        <?php wp_nav_menu( array( 

            'container' => 'nav', 

            'container_class' => 'menu-wrapper col5', 

            'container_id' => 'menu1-wrapper', 

            'menu_id' => 'menu1', 

            'menu_class' => 'cf menu', 

            'theme_location' => 'menu1', 

            'fallback_cb' => 'bfa_page_menu' 

        ) ); ?>

    </div>

</div>

Quote:

Let's see, I'm cramped for space with the sitetitle already so the menu will have to give up two columns right? Each column is 80 pixels wide so with a 100px logo I would need to steal two columns?

stop thinkng about PX's you need to think about things fitting in columns and you only have 12 columns to work with

Quote:

Is there a way to do incremental or part of a column in this case?

you might be able to adjust the positioning of the two items, but it will be messed up when you resize the page or look at in on a mobile device.

Quote:

What would the declaration appear like for inserting an 100px square bitmap immediately preceding the sitetitle?

you should not use a bitmap - use a png or jpg

Quote:

I'm assuming that it would somehow be inserted in between logo-area and sitetitle?

it should be in a seperate <div> for example

HTML Code:

<div id="banner-bg" class="cf">

        <div id="banner" class="row">

            <div id="my-logo-image" class="col2">

                    <img src="my.png />

            </div>

                <div id="logo-area" class="col5">

                        <<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">

                                <a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>

                        </<?php bfa_if_front_else( 'h1', 'h3' ); ?>>

                        <p id="tagline"><?php bloginfo( 'description' ); ?></p>

                </div>

                <?php wp_nav_menu( array( 

                        'container' => 'nav', 

                        'container_class' => 'menu-wrapper col5', 

                        'container_id' => 'menu1-wrapper', 

                        'menu_id' => 'menu1', 

                        'menu_class' => 'cf menu', 

                        'theme_location' => 'menu1', 

                        'fallback_cb' => 'bfa_page_menu' 

                ) ); ?>

        </div>

</div>

Quote:

Am I right in removing two from menu-wrapper col7 and making it col5?

that will work since the total columns will equal 12

Ok, I got it. It's working. I see that the dimensions of the bitmap image are automatically adjusted to fit whatever number of columns you assign it. There was a quote missing at the end of the path for the image.

PHP Code:


		
			
<div id="banner-bg" class="cf">
    <div id="banner" class="row">
        <div id="ecopsi-logo-image" class="col1">
          <img src="/images/logo.EcoPsi.100px-trans.png" />
        </div>
        <div id="logo-area" class="col6">

By the way, png and jpg files are bitmap images also referred to as raster images.

Now how do I adjust the vertical position of the sitetitle? I assumed that it was css and in "various.css" but nothing I did affected the position of the sitetitle. I would like to adjust the vertical position of the sitetitle so that it is lower/closer to the tagline.