where is the site logo control?

This is an open forum for any mojoPortal topics that don't fall into the other categories.

This thread is closed to new posts. You must sign in to post in the forums.
10/14/2009 3:17:39 PM
Gravatar
Total Posts 18439

Re: where is the site logo control?

I'll let Joe D help with the css but here is some info that will help you.

Any css files in your skin folder that are not listed in the style.config file can be safely deleted. stylelayout.css is not used anymore and it can be deleted as can styleborders.css, stylecolors.css, styleimages.css which are now all combined in style.css. I probably should have told you to delete all the skins from /Data/Sites/1/skins before copying them, then you would not have the extra legacy files.

There are other files that are used though, consult the style.config file to know what is safe to delete.

The files listed in style.config are combined together according to their sequence in the style.config file and minified. So you can actually organize your css into as many or as few files as you want according to your own preferences, and you can make some skins share files froma common location as well.

For more info on style.config see this page
http://www.mojoportal.com/understanding-the-styleconfig-file.aspx

Hope it helps,

Joe 

10/14/2009 3:20:51 PM
Gravatar
Total Posts 69

Re: where is the site logo control?

Sorry didn't notice the removal when I pasted.  I am currently developing on localhost, so not public yet.

<div id="wrapheader">

 

Let me know if I need to provide anything else.

Thanks,

Bryan

10/14/2009 4:06:18 PM
Gravatar
Total Posts 2203

Re: where is the site logo control?

You probably have a lot of other stuff inside of wrapheader. I would suggest wrapping the two controls in their own div (wraplogotitle) and applying CSS to that selector. The following is pulled directly from my blog site (http://josephmdavis.com):

#wraplogotitle{
 position:relative;
 display: table;
 width:100%;
 height: 60px;
}

.sitelogo {
 float: left;
 margin: 0;
 padding: 5px;
 position: relative;
 z-index: 300;
 display: table-cell;
 vertical-align: middle;
}

h1.siteheading {
 font-size: 22px;
 font-weight: bold;
 letter-spacing: 4px;
 position: relative;
 display:table-cell;
 vertical-align: middle;
 width: 100%;
}

Hope this helps,
Joe D.

10/14/2009 4:11:32 PM
Gravatar
Total Posts 2203

Re: where is the site logo control?

FYI,

I setup a store on my personal blog site and created a "Buy Joe a Cup of Joe" product. I DO NOT expect Bryan or Joe A. to donate anything. I created the product for two reasons:

  1. To see how quickly I could set up a store in mojoPortal (about 30 minutes).
  2. I liked Joe A.'s suggestion to have a Buy Me Beer link in my signature.

Thanks guys! Go mojo!

-Joe D.

10/14/2009 5:42:19 PM
Gravatar
Total Posts 69

Re: where is the site logo control?

Joe,

I checked and nothing else is wrapheader.  Also, here is what I am observing now: below see ".siteheading" in style.css - when I put an h1 infront of it, it doesn't control the site title at all.  When I take the h1 off, it does affect the font and size, but not the position.  I can move the sitelogo around by changing margin.

Does this make sense?

<div id="wrapheader">

<portal:SiteLogo id="SiteLogo" runat="server"></portal:SiteLogo>

<portal:SiteTitle id="SiteTitle" runat="server"></portal:SiteTitle>

<!-- <portal:SkipLink id="SkipLink1" runat="server" /> -->

</div>

#wrapheader {
position:relative;
display: table;
width:100%;
height:84px;
background:url('headerbg-orange.gif') repeat-x 0 0;
}

.sitelogo {
    float: left;
    margin: 0;
    padding: 0px;
    position: relative;
    z-index: 300;
    display: table-cell;
    vertical-align: middle;
}

.siteheading {
 font-size: 24px;
    font-weight: bold;
    letter-spacing: 4px;
    position: relative;
    display:table-cell;
    vertical-align: middle;
    width: 100%;
}

10/14/2009 5:44:38 PM
Gravatar
Total Posts 69

Re: where is the site logo control?

One othe question.  Does it matter that the layout.master refers to sitelogo and sitetitle, but in the style.css we are referring to .sitelog and .siteheading?

10/14/2009 6:18:06 PM
Gravatar
Total Posts 69

Re: where is the site logo control?

Joe,

I had a thought.  I am using the standard skin code from styleshout-stylevantage.  you could see what I started with.

10/15/2009 10:06:58 AM
Gravatar
Total Posts 2203

Re: where is the site logo control?

In the style.css, I see two siteheading selectors (.siteheading and h1.siteheading). I would merge those into one h1.siteheading selector. You want to use the h1.siteheading because it will allow you to change the padding and margin for that instance of the h1 tag.

I have included the necessary CSS below. Knowing which skin you are using is always a big help. :-)

#wrapheader {
position:relative;
height:84px;
background:url('headerbg-orange.gif') repeat-x 0 0;
display:table;
width:100%;
}

#wrapheader a {
 display: table-cell;
 vertical-align: middle;
}

.sitelogo {
float:left;
margin:0;
padding: 5px;
position:relative;
display:table-cell;
vertical-align:middle;
}

h1.siteheading {
margin:0;
padding:0;
font-weight:bolder;
font-size: 2.4em;
font-family: 'Trebuchet MS', Arial, Sans-serif;
letter-spacing:-2px;
width: 100%;
vertical-align:middle;
display: table-cell;
position:relative;
}

You may notice that the logo and title don't look vertically centered. This is because the background of the wrapheader has that orange line which visually divides the page from the header. If you add another div around your controls and set its height to probably about 74px, the logo and title will be visually vertically centered. I have set up my mojoPortal demo site with the styleshout-stylevantage skin and I have made the changes to the skin for the logo and title. If you view the site with FireFox and use the FireBug plugin to view the CSS, you will see how to make this work. http://mojodemo.i7media.net

HTH,
Joe D.

10/15/2009 11:12:39 AM
Gravatar
Total Posts 69

Re: where is the site logo control?

Joe,

Its now working, thanks for the help.  Have a couple of cups of joe no me via paypal!

With the firefox, firebug stuff you mentioned at the bottom, could you post the changes you did to the controls here as when I tried to download the firefox 3.5 install, my virus scan software is picking up a trojen during the download and blocking me from installing (not sure why, but don't want to invite troubles if I don't have too).

Again many thanks for all the help.  And as I mentioned before, I am sure I will have more opportunities to buy you some more joe!

Thanks,

Bryan

10/15/2009 11:47:13 AM
Gravatar
Total Posts 2203

Re: where is the site logo control?

Here are the change I made. Notice the additional div surrounding the logo and the title. I also removed "#wrapheader a" from the css because it is replaced by "#wraplogotitle a".

<div id="wrapheader">
  <div id="wraplogotitle">
    <portal:SiteLogo runat="server" />
    <portal:SiteTitle runat="server" />
  </div>
</div>

#wrapheader {
position:relative;
height:84px;
background:url('headerbg-orange.gif') repeat-x 0 0;
display:table;
width:100%;
}

#wraplogotitle{
 display: table;
 height: 74px;
}

#wraplogotitle a {
 display: table-cell;
 vertical-align: middle;
}

.sitelogo {
float:left;
margin:0;
padding: 5px;
position:relative;
display:table-cell;
vertical-align:middle;
}

h1.siteheading {
margin:0;
padding:0;
font-weight:bolder;
font-size: 2.4em;
font-family: 'Trebuchet MS', Arial, Sans-serif;
letter-spacing:-2px;
width: 100%;
vertical-align:middle;
display: table-cell;
position:relative;
}

Thank you for the coffee, it is much appreciated.

10/15/2009 11:59:00 AM
Gravatar
Total Posts 69

Re: where is the site logo control?

Got it,

All is working fine now.

Thansks again!

 

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