Create a block on the right side of page.
Permalink
Hi I'm customizing a web site from a previous design. I would like to add a block on the right bottom side of the main page container right under the facebook button but the blocks get added only to the left side. I have tried looking at the css to maybe change this but I can't find a solution. Can somebody please help me? The website ishttp://www.crossroadslink.com/
Perhaps I'm confused. You say you want to add a block to the right side and then say the block only shows up on the right side. That sounds like it's working fine. Can you re-phrase the question?
Sorry I meant that they only show on the left side.
It's likely a problem with the nesting of the DIVs in the page type files. When I look at the source, you have several Facebook links outside the container DIV. I you could attach the PHP file that the home page uses for it's page type (likely in [root]/themes/crossroads) we could have a better look at how the page is structured. To attach a PHP file to these forums, you will need to rename it with a .txt extension.
Looks to me like it's a "full width" page. If so and the theme is not "responsive you could use margins to slide it into place where you want it to be!
From looking at the source, there appears to be a "home-right-main" div that has "float:right" applied to it that already contains the content on the right sidebar but there is also a non-functioning, deprecated Twitter widget inside this div that could easily be halting the rendering as well. The console is throwing a warning about it.
I attach the home.php
Try the attached file. I added an editable area to the right sidebar and I commented out the dead Twitter widget.
Thanks so much it worked:)
Good to hear.
If you want to make the right sidebar completely editable, you can add a Content block to the sidebar area. Then, from your browser, use your Windows clipboard to copy the page content that's in the right sidebar and paste it into the new Content block. Then edit your home.php file and take out the hard-coded HTML.
If you want to make the right sidebar completely editable, you can add a Content block to the sidebar area. Then, from your browser, use your Windows clipboard to copy the page content that's in the right sidebar and paste it into the new Content block. Then edit your home.php file and take out the hard-coded HTML.
Is there a way to add a center block? I wanted to make a slideshow of the background-home.png
Is it possible? Or would I have to look into customizing the css and php to add a slideshow or would it be better to implement the slideshow on the cms by adding a center block.
Is it possible? Or would I have to look into customizing the css and php to add a slideshow or would it be better to implement the slideshow on the cms by adding a center block.
I just noticed that the home.php page you attached doesn't have some important code at the bottom. When you're signed in to the site, do you get an edit bar across the top of the home page?
You need to add this line of code just above the closing /BODY tag:
This layout of the home page doesn't lend itself to adding something in the middle because then there would be a slideshow on top of an image which almost always looks bad. After you have added the code I mentioned above, you could try to switch the layout to the same one the other pages are using by going to 'Edit->Design' and choosing something other than 'Home' such as 'Sidebar' or whatever they called it in your theme. Home pages are tricky to make wholesale changes to because you can't build a replacement page off to the side and then just swap the old with the new.
You need to add this line of code just above the closing /BODY tag:
<?php Loader::element('footer_required'); ?>
This layout of the home page doesn't lend itself to adding something in the middle because then there would be a slideshow on top of an image which almost always looks bad. After you have added the code I mentioned above, you could try to switch the layout to the same one the other pages are using by going to 'Edit->Design' and choosing something other than 'Home' such as 'Sidebar' or whatever they called it in your theme. Home pages are tricky to make wholesale changes to because you can't build a replacement page off to the side and then just swap the old with the new.
Thank you I'll add the code.
What I was thinking was maybe erasing the background image so I could put a slideshow. I would need to figure out though how to put a block in the center, with 0 padding and 0 top margin so it could touch the top border of the container.
Thank you for all of your help.
What I was thinking was maybe erasing the background image so I could put a slideshow. I would need to figure out though how to put a block in the center, with 0 padding and 0 top margin so it could touch the top border of the container.
Thank you for all of your help.
Since this is your home page, it's not as easy to experiment with because if you botch it up, your botched page is very public. To solve that, I would create a new 'page type' so you can just swap out the old for the new through 'Edit->Design'.(more on that later)
To do that, I'm going to take you for a ride through the inner workings of concrete5. Hold on!
First, I would make a copy of your "home.php" and call it "home_3_cols.php". Then visit 'Dashboard->Page Types' and click the 'Add Page Type' button and put 'Home 3 Cols' as the name and 'home_3_cols' as the handle (case sensitive, NO .php extension).
Then in the new 'home_3_cols.php' file, find this code around line 25-ish:
and put this code immediately after it:
Then add this basic style to your style.css sheet to get you started:
To try out this new page, go to 'Dashboard->Sitemap' and add a page to your site. I see that your site has a 'hard-coded' navigation so it doesn't really matter where you add this page but you might want to add it somewhere 'out of the way'.
Once you've added the page, let's make sure that it doesn't show up in any page lists or navigation in the future by hovering over the 'Edit' button and choosing 'Properties' and then the 'Custom Attributes' tab. Add all 4 of the 'Exclude from...' attributes and make sure you put a check in each of them and save this. Then, to finally bring in your new layout so you can see it, hover over the Edit button again and choose 'Design' and then select the 'Home 3 Cols' page type.
Your new layout should appear. Put this new page in Edit mode and see where the columns actually are. Rest assured, it will be a miracle if this works the first time you fire it up. You will most certainly have to tweak the css relating to the widths, paddings and margins on the 3 divs to get it working but this should get you started.
Once you're happy with the layout, you can swap your old Home page for the new one by landing on your existing Home page and hovering over the Edit button and choosing 'Design'. Then choose 'Home 3 Cols' from the list of possible page types and that should do it. If you don't like what you see, do the Edit->Design thing again but choose 'Home' to swap back to your existing, safe home page.
I'm sure you will have questions because this can get quite involved. Just holler and we'll see if we can help.
Mike
To do that, I'm going to take you for a ride through the inner workings of concrete5. Hold on!
First, I would make a copy of your "home.php" and call it "home_3_cols.php". Then visit 'Dashboard->Page Types' and click the 'Add Page Type' button and put 'Home 3 Cols' as the name and 'home_3_cols' as the handle (case sensitive, NO .php extension).
Then in the new 'home_3_cols.php' file, find this code around line 25-ish:
<div id="home-main-left"> <img src="<?php echo $this->getThemePath(); ?>/images/quicklinks.gif" alt="Quicklinks" /> <?php $a = new Area('Main'); $a->display($c); ?> </div>
and put this code immediately after it:
<div id="home-main-center"> <?php $a = new Area('Center'); $a->display($c); ?> </div>
Then add this basic style to your style.css sheet to get you started:
#home-main-center { float:left; width:400px; padding:10px; margin:10px; } #home-main { overflow:auto; }
To try out this new page, go to 'Dashboard->Sitemap' and add a page to your site. I see that your site has a 'hard-coded' navigation so it doesn't really matter where you add this page but you might want to add it somewhere 'out of the way'.
Once you've added the page, let's make sure that it doesn't show up in any page lists or navigation in the future by hovering over the 'Edit' button and choosing 'Properties' and then the 'Custom Attributes' tab. Add all 4 of the 'Exclude from...' attributes and make sure you put a check in each of them and save this. Then, to finally bring in your new layout so you can see it, hover over the Edit button again and choose 'Design' and then select the 'Home 3 Cols' page type.
Your new layout should appear. Put this new page in Edit mode and see where the columns actually are. Rest assured, it will be a miracle if this works the first time you fire it up. You will most certainly have to tweak the css relating to the widths, paddings and margins on the 3 divs to get it working but this should get you started.
Once you're happy with the layout, you can swap your old Home page for the new one by landing on your existing Home page and hovering over the Edit button and choosing 'Design'. Then choose 'Home 3 Cols' from the list of possible page types and that should do it. If you don't like what you see, do the Edit->Design thing again but choose 'Home' to swap back to your existing, safe home page.
I'm sure you will have questions because this can get quite involved. Just holler and we'll see if we can help.
Mike
Thank you very much for your help. This will enable me to learn more of the program and in turn make the web site hopefully more interactive.
You are right it is risky to edit the home page because everybody will be able to see the changes.
Again thanks:)
You are right it is risky to edit the home page because everybody will be able to see the changes.
Again thanks:)
I followed the steps you gave me and it worked. I was able to add a slideshow and I did a little overlap so the slideshow could blend well with the other blocks.
I'm glad I was able to experiment on another home page.
Thanks so much for your help.
I'm glad I was able to experiment on another home page.
Thanks so much for your help.
Glad to hear! It looks good, Well done.
You might consider removing this from line 3 of style.css
I have a wide monitor and your background doesn't repeat along the x-axis and so it gets cut off.(see attached) If you remove that css line, the background will repeat and fill in.
You might consider removing this from line 3 of style.css
background-repeat:repeat-y
I have a wide monitor and your background doesn't repeat along the x-axis and so it gets cut off.(see attached) If you remove that css line, the background will repeat and fill in.
I think it is because I overlapped the blocks, but whenever I want to edit a block on the home page I can't get the menu to edit them, only the slideshow.
Some of the stuff on this page has been hard-coded into the page. You need to edit your new "home_3_cols.php" and remove that html and paste it into an HTML block on the page.
I just changed the z-index to 2, it was in 2000 and it works.
That will work but be careful to only set it as high as you needed to make it accessible or you might cause other things to be unavailable.
