Content in Header??

[bmelendy]

Hello, I'm new to CMSMS but have it all running now.  I'm just trying to learn how to add content to the header, just right of the logo.  Would I be editing a style sheet for that?  I'm not sure how to proceed. Thanks for any help.  I've attached a picture of what I'm trying to edit. 

....Brad

[attachment deleted by admin]

[westis]

Brad,

You'll have to put your content for the header in the div block that looks like this: .

You'll have to play around with another div inside that one, that is floated right or something if you want the text to the right of the logo. The logo image is added in the stylesheet, it's a background image for the tag.

René, changing the title between the tag changes the page title that is displayed in the browser's header, at the very top of the browser.

[KaiMartin]

You'll have to play around with another div inside that one, that is floated right or something if you want the text to the right of the logo.

I'd like to do exactly what Brad wanted to do: Put some text centered in the space next to the logo. Right now the text renders flushed right under the logo. Can anyone hint me to how this inside div could possibly look like? Do I have to define a section in the css file?

Yes, I am a bit clueless. Maybe you can just point me to an appropiate FAQ.

------

[KaiMartin]

Yes, I am a bit clueless. Maybe you can just point me to an appropiate FAQ.

Ok, I took a lesson CSS for dummies at http://de.selfhtml.org/ and finally came up with a solution that works for me. I removed the tags from the template and in the CSS file set the position attribute to absolute. Result is an empty box linked to the home page. This is a workaround for cms_selflinks inability to take the logo as content.

In the template file:

Code: Select all

<!-- Start Header, with logo image that links to the default start page -->
   <div id="header" class="clearfix">
      {cms_selflink dir="start" text=""} {title}
  <hr />
   </div>
   <!-- End Header -->

In the Layout stylesheet:

Code: Select all

    /* HEADER */
        div#header {
            background:  url(uploads/images/logo-lila-transp_70.png) no-repeat 10px 5px;
            font-weight: 900;
            font-size: 50px;
            display: block;
            height: 80px;
            line-height: 80px;
            text-indent: 150px;
            text-align: center;
            vertical-align: middle;
            width: 100%;
            margin: 0;
            padding: 0;
            background-color: #385C72; /* needed for the CSS-Menu templates */
        }
        
        /* Let the left half header link to the home page */
        div#header a {            
            position:absolute; 
            top:0px;
            left:0px;
            height:80px;
            width:50%;
       }           

    /* END HEADER */

And this is what it looks like in firefox:


------

[tambaqui]

Hi,
I found another solution. It treats the logo as content, not as part of the design, and it doesn't use {cms_selflink}, so some may not like it. However, for me it has advantages. Well, until now I only tested with Firefox 1.0...

In the layout stylesheet, I uncommented the background, text-indent and width attributes.

Code: Select all

        div#header h1 a {
            /*background:  url(uploads/images/logo.gif) no-repeat 0 12px;*/
            display: block;
            height: 80px;
            /*text-indent: -700em;*/
            /*width: 198px;*/
            margin: 0;
            padding: 0;
            text-decoration:none;
        }

The header section in the template looks like this

Code: Select all

   <!-- Start Header, with logo image that links to the default start page -->
   <div id="header" class="clearfix">
        <a href="http://www.website.de/cmsms/index.php/home" style="float:right;">
           <img width="200" height="100" src="uploads/Images/logo.gif" alt="MyWebsite" />
        </a>
        <h1>
        <a href="http://www.website.de/cmsms/index.php/home" style="line-height:80px; vertical-align:middle; padding-left:50px; color:#000000;">Das Salmlernetz</a>
        </h1>
   <hr />
   </div>
   <!-- End Header -->

Now I can use logos which are larger than the block -> background:url would cut them off (see screenshot below). But as {cms_selflink} doesn't work with images, I had to use HTML style links.
"text-indent: -700em;" pushes any text out of the screen, which is not wanted here, and "width: 198px;" limits the area working as link. Without the latter almost all of the header area functions as link, not only the text.
"Float" places text and image inline.
I placed the additional style instructions for the linked text directly in the template, which may be against orthodoxy, but you may create a new stylesheet for this single use if you like.
This is how it looks. All the header area (in blue) and the image are linked: