Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

[SOLVED] Modify Responsive Desktop View


  #1  
Old Aug 26, 2014, 09:10 AM
Auriel Kitsu's Avatar
Auriel Kitsu
 
43 posts · Aug 2014
Cincinnati, OH (USA)
Send a message via Yahoo to Auriel Kitsu Send a message via Skype™ to Auriel Kitsu
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.
  #2  
Old Aug 26, 2014, 10:43 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
look in MTO->CSS Files->various.css
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Aug 26, 2014, 11:05 AM
Auriel Kitsu's Avatar
Auriel Kitsu
 
43 posts · Aug 2014
Cincinnati, OH (USA)
Send a message via Yahoo to Auriel Kitsu Send a message via Skype™ to Auriel Kitsu
Quote:
Originally Posted by juggledad
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.
  #4  
Old Aug 26, 2014, 06:21 PM
Auriel Kitsu's Avatar
Auriel Kitsu
 
43 posts · Aug 2014
Cincinnati, OH (USA)
Send a message via Yahoo to Auriel Kitsu Send a message via Skype™ to Auriel Kitsu
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;
}
  #5  
Old Aug 26, 2014, 06:53 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Aug 27, 2014, 12:01 AM
Auriel Kitsu's Avatar
Auriel Kitsu
 
43 posts · Aug 2014
Cincinnati, OH (USA)
Send a message via Yahoo to Auriel Kitsu Send a message via Skype™ to Auriel Kitsu
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.
  #7  
Old Aug 27, 2014, 02:51 AM
Auriel Kitsu's Avatar
Auriel Kitsu
 
43 posts · Aug 2014
Cincinnati, OH (USA)
Send a message via Yahoo to Auriel Kitsu Send a message via Skype™ to Auriel Kitsu
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
  #8  
Old Aug 27, 2014, 05:12 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Aug 27, 2014 at 06:41 AM.
  #9  
Old Aug 27, 2014, 06:21 AM
Auriel Kitsu's Avatar
Auriel Kitsu
 
43 posts · Aug 2014
Cincinnati, OH (USA)
Send a message via Yahoo to Auriel Kitsu Send a message via Skype™ to Auriel Kitsu
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>
  #10  
Old Aug 27, 2014, 06:58 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Aug 27, 2014, 03:14 PM
Auriel Kitsu's Avatar
Auriel Kitsu
 
43 posts · Aug 2014
Cincinnati, OH (USA)
Send a message via Yahoo to Auriel Kitsu Send a message via Skype™ to Auriel Kitsu
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.

Last edited by Auriel Kitsu; Aug 27, 2014 at 07:17 PM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Can I use Themeframe on Linux Mint desktop OS? ungadoohaa ThemeFrame Presales 1 Jan 27, 2014 10:32 AM
"No Posts found" in Admin View and "Not Found" in Page View dextor Atahualpa 3 Wordpress theme 1 Sep 12, 2009 08:09 PM
[SOLVED] &quot;No Posts found&quot; in Admin View and &quot;Not Found&quot; in Page View dextor Plugins & Atahualpa 0 Sep 12, 2009 02:16 AM


All times are GMT -6. The time now is 04:46 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.