We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

The Top (header) in ShowCase - Sidebar edition Be Fixed Like Facebook | Forum

Topic location: Forum home » Development » Themes
Wilson
Wilson Jun 2 '14

I’m using ShowCase - Sidebar edition theme and need to make the top (header) be fixed…like say facebook dose. When you scroll down the page, it goes past the (“tool bar”) links and shows a black back ground. I just want all of it to be like an iframe. All content scrolls below the iframe showing the (tool bar) links and notifications .

I see that the tool bar is fixed and does not scroll…just need to know what to change to make it the whole site across the top. Been looking in ow_themes/showcase_withsidebar/master_pages/general.html but again not too sure what I need to do.


Help…lol

Wilson

The Forum post is edited by Wilson Jun 2 '14
Alia Team
Alia Jun 2 '14
Wilson, can you take a screen shot and mark the area which you would like to stay fixed?
Wilson
Wilson Jun 3 '14

Hey Aliia,

Thanks for the reply.....Ok I have attached a photo of what I want to do to this theme. Just not too sure what to edit or what code I need to make this work. I'm thinking iframe here but again just want to make sure what to use and edit...thank you for your help!

Wilson

Attachments:
  iframe.jpg (89.95Kb)
Alia Team
Alia Jun 4 '14
Wilson, this part is called site panel.
You can fix it via CSS in admin panel>>appearence>>edit theme>>CSS.
Add following styles into the bottom form:

.ow_site_panel {
    position: fixed;    top: 0;    width: 100%;    z-index: 40;}


1. position: fixed

Makes site panel "sticky" on the top.



As a result you will have some space from top and right.

2. top: 0;
Removes the top space.

3.
width: 100%;
fills in the space to the right.

4.
z-index: 40;
Will display your sticky panel on top of other elements instead of showing it behind them( when you scroll down the page).

Result:




Alia Team
Alia Jun 4 '14
I have used Origin theme in my screen shots, but this solution should work on Showcase as well.
Wilson
Wilson Jun 4 '14
Hey Aliia,

Works Great…thanks so much for the schooling me. Always enjoy learning. Actually I had to open base.css in my html editor and add the code at the bottom, then saved it and pushed it using ftp onto the server. Refreshed the page and all was good. For some reason I can’t add coding using the admin panel, I have to us this method to add css.

Oh if I wanted to add a few new links (html coding) (see attached image) next the web site link, what file would I need to edit to make it work?

Thanks again for the help,
Wilson
Attachments:
  add-links.jpg (123.03Kb)
Alia Team
Alia Jun 5 '14
Wilson, if you are having troubles adding CSS from admin panel I recommend reporting this in Bugs reports and Troubleshooting section of our forum.

Editing base.css directly will still work, but you will lose your custom CSS if you update the theme in future, while CSS added via admin panel is always saved.

Regarding your question. The code for the site name within site panel comes from /theme_name/master_pages/dndindex.html and general.html :

<div class="ow_site_panel">
                {component class='BASE_CMP_Console'}
            <div class="ow_logo_wrap"><a href="{$siteUrl}">{$siteName}</a></div>
        </div>


Try adding custom links into the ow_logo_wrap div.

Whenever you are editing .html files, you need to enable DEV MODE ( set to "true") in ow_includes/config.php. This will clean site's cache and you will be able to see changes right away. Once you are done checking, always disable DEV MODE ( set to "fasle").

Any changes done within .html files will be lost if you update the theme in future.
Alia Team
Alia Jun 5 '14
Topic was moved from Custom Code Modifications.