Editing PHP to move "Areas" around
Permalink
Hello. I would like to understand how to position "Areas" in my theme.
For instance. I would like to slide the are in which my logo is inside of my header to the left a little bit because my autonav is falling below it.
My theme uses "headergeneral.php" on all pages. here is the code inside of "headergeneral.php"
I understand that this code:
creates the area and displays it. But how does this area know where to be in the layout? How would I move that area a little bit to the left? And the Area that the autonav sits in a little bit to the right?
Here is the website so you can understand what I'm talking about: BrianKeschinger.com
Thanks in advance!
For instance. I would like to slide the are in which my logo is inside of my header to the left a little bit because my autonav is falling below it.
My theme uses "headergeneral.php" on all pages. here is the code inside of "headergeneral.php"
<header>
<div id="top-inner">
<div id="logo">
<?php
$a = new GlobalArea('Site Name');
$a->display();
?>
</div><!--logo-->
<nav>
<?php
$a = new Area('Navigation');
$a->display($c);
?>
</nav>
</div><!--top-inner-->Viewing 15 lines of 22 lines. View entire code block.
I understand that this code:
<?php $a = new Area('Navigation'); $a->display($c); ?>
creates the area and displays it. But how does this area know where to be in the layout? How would I move that area a little bit to the left? And the Area that the autonav sits in a little bit to the right?
Here is the website so you can understand what I'm talking about: BrianKeschinger.com
Thanks in advance!
Have you checked out Add Layout? Click on a new area and choose Add Layout. Then you can choose how it displays.
Although the above is one way you could do this, there is also another method.
You could use the "design" option to use your own CSS, or simply add spacing.
Click on the block you need to edit, then on the popup menu, select "Design".
On the "spacing" tab, you could add your own padding (although using margin would be most suitable here).
Or, on the "custom css" tab, you could add your own css there to do what you need.
Personally, I would use the custom css option since you can do more with that.
Hope this helps.
You could use the "design" option to use your own CSS, or simply add spacing.
Click on the block you need to edit, then on the popup menu, select "Design".
On the "spacing" tab, you could add your own padding (although using margin would be most suitable here).
Or, on the "custom css" tab, you could add your own css there to do what you need.
Personally, I would use the custom css option since you can do more with that.
Hope this helps.
I'm not sure that you guys are understanding my question. I don't want to change how many rows/columns are in the area or how the block sits in the area with CSS. I want to know how to MOVE the area itself. I want to change the positioning of the ACTUAL area. Not the block within the area.
I think if your div or other html5 tags have proper css like width, float etc, it will automatically force the ccm Highlighter panel in proper position. But I often see that it cause problem if a div has floating element but doesn't set proper width.
This is my personal opinion and I'm telling this as from my experiences. My be someone else could answer you more prominent.
Rony
This is my personal opinion and I'm telling this as from my experiences. My be someone else could answer you more prominent.
Rony
So you're saying that it's the CSS that is attached to the IDs "top-inner" and "logo" that is giving that area its positioning?
