Text Footer menu

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
2/6/2012 3:36:47 PM
Gravatar
Total Posts 383
Thanks Squire Dude

Text Footer menu

Hi,

I have just noticed (from a user) that I do not have the usual text menu in the footer.

I used Artisteer 3.1 to develop the skin and it does have the the text menu in the footer position.  How can I get this to show up on my live site?  (using mojoPortal v2.3.8.1)

Anyone got any ideas how to get the menu back?

Thanks

2/6/2012 4:21:40 PM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Text Footer menu

Footer text doesn't carry over from Artisteer since that comes from layout.master, and that file is not touched during the Artisteer to mojoPortal skin conversion process.

So you'll need to edit the layout.master of your skin and place your text and links within <div class="art-footer-wrapper"></div> section.

Jamie

2/6/2012 4:57:28 PM
Gravatar
Total Posts 383
Thanks Squire Dude

Re: Text Footer menu

Hi Jamie,

Thanks, I was afraid of that!

I want to inherit (duplicate) the same menu that is across the head of the site.  But usual a simple single level (breadcrumb) text looking version. 

Got any suggestions of where I can copy the code from?

2/6/2012 5:40:47 PM
Gravatar
Total Posts 2253

Re: Text Footer menu

Hi Phill,

Add this to your layout.master where you want the footer menu to appear:

<portal:SiteMenu id="FooterMenu1" runat="server" MenuSkinID="FooterMenu"
UseTreeView="false" HideMenuOnSiteMap="false" TopLevelOnly="true" />

Then add this to your theme.skin:

<portal:mojoMenu runat="server" SkinID="FooterMenu"
ContainerCssClass="footernav"
RenderCustomClassOnLi="false"
RenderCustomClassOnAnchor="false"
RenderLiSelectedCss="true"
RenderAnchorSelectedCss="true"
UlCssClass="root"
LiCssClassWithoutChildren=""
AnchorCssClass=""
LiSelectedCssClassWithoutChildren="current"
AnchorSelectedCssClassWithoutChildren="current"
RenderImages="false"
UseNet35Mode="true"
/>

Finally, add this to your styleartisteeroverrides.css file:

/* FOOTER NAV */
.footernav {
display: block;
}
.footernav li {
float: left;
padding: 0 5px;
}

.footernav li:first-child {
padding-left: 0;
background: none;
}

/* To hide a link from the Site Menu, place the footeronly class in the
* "Custom Menu CSS Class" option in the page settings for a particular page.
*/
.sf-menu > li.footeronly {
display: none;
}

You may need to adjust the style a little bit but this is what we use in all of our skins that requires this type of thing.

HTH,
Joe D. 

2/6/2012 6:54:39 PM
Gravatar
Total Posts 383
Thanks Squire Dude

Re: Text Footer menu

Hi Jamie,

Thanks that did the trick...

The line appears exactly just above the existing footer line... now to change the "left" alignment and make it "Centered."

Thanks

2/6/2012 7:11:35 PM
Gravatar
Total Posts 383
Thanks Squire Dude

Re: Text Footer menu

Hi Jamie,

Okay I give up... never did understand CSS very well.  (I can read it but not write it)

I tried adding the following to the stlye-artisteer-overrides.css at the end ...
.art-footer-wrapper {
text-align: center
}

Didn't do anything!

What do I have to add and where to get the footer menu to be centered???

 

2/6/2012 7:42:33 PM
Gravatar
Total Posts 2253

Re: Text Footer menu

Hi Phill,

It kind of depends on the css that is applied to containers around the footer menu. Can you post a link to the site?

Given the CSS I gave you, you could

  1. add text-align: center; to the .footernav selector 
  2. remove float: left; from the .footernav li selector
  3. add display: inline; to .footernav li selector

Thanks,
Joe D. 

2/7/2012 9:39:22 AM
Gravatar
Total Posts 383
Thanks Squire Dude

Re: Text Footer menu

Hi Joe D,

Thanks for the changes, they worked exactly the way they should.

Thanks Guys

2/8/2012 3:25:43 PM
Gravatar
Total Posts 383
Thanks Squire Dude

Re: Text Footer menu

Hi Joe D,

Well here is a strange one... the solution you guys sent worked for two of my sites but now I am trying it on another pair (localhost test & public server)

Localhost - menu is there but left aligned.

Publix server - centered but each menu item is stacked on top of each other.  www.SeamanMarineSoftware.com

Thanks

2/8/2012 3:39:42 PM
Gravatar
Total Posts 2253

Re: Text Footer menu

Hi Phill,

It doesn't look like you included the CSS I gave you for the footer in your SeamanMarineSoftware site. Include that CSS and you should be good to go.

Thanks,
Joe D. 

2/8/2012 6:05:17 PM
Gravatar
Total Posts 383
Thanks Squire Dude

Re: Text Footer menu

Hi Joe D.

I did include the code you sent in the style-srtisteer-overrides.css... here is the complete files code (including the last changes)...

/* overrides for Artisteer you should not modify the files exported from Artisteer such as style.css, you can override things as needed here or in stylemojo.css */

/* this is needed because the artisteer buttons otherwise looke enabled even when disable */
input.art-button[disabled="disabled"] { background-color: #ccccff !important; color: #9999cc !important; }

/* this keeps the background images out of the editor and dialog pages */
body.dialogpage ,
body.filedialog,
body.wysiwygeditor
{
background-color: white;
color:black;
background-image: none;
font-size: 12px;
min-width: 100px;
}

body.help-page
{
color:black;
background-color: white;
background-image: none;

}

body.wysiwygeditor  p
{
font-size: 14px;
margin: 12px 0;

}

body.wysiwygeditor ul li
{
text-decoration: none;
line-height: 125%;
padding: 0 0 0 13px;
margin-left:20px;
background-image: url('images/blockcontentbullets.png');
background-repeat: no-repeat;
}

body.wysiwygeditor  h1 { font-size:28px; }
body.wysiwygeditor  h2 {font-size :24px;}
body.wysiwygeditor  h3 { font-size: 22px; }
body.wysiwygeditor  h4 { font-size: 18px; }
body.wysiwygeditor  h5 { font-size: 16px; }

body { overflow-x:hidden;  }
form { height:100%; }

img
{
border: 0!important;
}

ul.userstats img,
ul.linkitem  img{ margin:0; }

/* this keeps side bar background images from pushing past the footer in some designs */
.leftside , .rightside{ overflow: hidden;}

.art-blockheader .t {max-height:40px; overflow:hidden; }

input, select, textarea { text-transform:none; }

.folder-panel, div.file-wraper { background-color:white; }
ul.file-list,
ul.file-list li ,
ul.folder-list,
ul.folder-list li
{ background-image:none; color:black; }

.aspcalendarmain th, .aspcalendarmain td,
.mpcalendarmain th, .mpcalendarmain td { text-align:center; }

.eventweekview  table,
.eventdayview  table { color:black; width:100%; }

.AspNet-DataList table td,
.eventdayview  table th,
.eventdayview  table td,
.eventweekview  table th,
.eventweekview  table td
{padding: 0px; border:none; }

table.FileManager_table {  border-spacing: 0px; }

.permission td,
.permission th,
.formwizard th,
.formwizard td ,
.sharedfiles th,  .sharedfiles td , .filemanager th , .filemanager td{ border:none; padding: 3px 0px 3px 0px!important;}
.filemanager th img, .filemanager td img, .sharedfiles th img, .sharedfiles td  img { margin:0px 2px 0px 2px ; }

/* begin Header */
div.art-header
{
margin: 0 auto;
position: relative;
z-index: -5;
width:900px;
height: 303px;
margin-top: 0;
margin-bottom: -3px;
}
.art-header-position
{
position: absolute;
top: 0;
right: 0;
left: 0;
}

.art-header-wrapper
{
position: relative;
top:0;
width:900px;
margin:0 auto;
}
.art-header-inner
{
position: relative;
margin: 0 3px;
}

.art-header:before
{
position: absolute;
display:block;
content:' ';
z-index:-2;
top: 0;
width:100%;
height: 303px;
background-image: url('images/header.png');
background-repeat: no-repeat;
background-position:top center;
}

.art-header:after
{
position: absolute;
z-index:-1;
display:block;
content:' ';
top: 0;
left:11px;
right:11px;
height: 303px;
background-image: url('images/header.jpg');
background-repeat: no-repeat;
background-position: center center;
}
/* end Header */

/* FOOTER NAV */
.footernav {
text-align: center;
display: block;
}
.footernav li {
display: inline;
padding: 0 5px;
}

.footernav li:first-child {
padding-left: 0;
background: none;
}

/* To hide a link from the Site Menu, place the footeronly class in the
* "Custom Menu CSS Class" option in the page settings for a particular page.
*/
.sf-menu > li.footeronly {
display: none;
}

The footer menu is now showing up left-aligned and I am unable to locate the place to change it!  There is also no separator (>>>) between the menu items.

Got any suggestions?

Thanks
Phill

You must sign in to post in the forums. This thread is closed to new posts.