Height of header

Forums    Public Forums    T3 Framework    Height of header
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • il_bujia Friend
    June 4, 2013 at 6:49 pm #187982

    Hi

    Is there any way to make the header block higher?I want to put in the background of header and image(979×400)and It cuts a part of the image.Altough it can be put in the background of the block,I want to make header block higher because I don’t want that the image seems deformed,and because I want to put the title”welcome to my web” in the top blue zone of the background image.
    I upload the image that I want to put in the background of header block to see what I’am refer.

    I’am working with T3 Quickstart for Joomla! 2.5,blank template.
    The link to my web is testweb1.no-ip.biz,You have to click in the folder named CRIS.

    Thanks

    1. image
    tilovas Friend
    June 4, 2013 at 8:07 pm #494748

    Hi,

    Yes you can change the size of header by using padding of .t3-header in custom.css I just don’t understand why you need two backgrounds.. use one. Ant your background width, with the shark, is bigger then your site width. So I suggest you use one img. Just take the two images and make one.

    1 user says Thank You to tilovas for this useful post

    1. il_bujia
    il_bujia Friend
    June 5, 2013 at 7:49 am #494810

    Thanks for your reply.I made what you suggest to me and it works,but there’s a problem.I take the two images and make one,and use padding to show the shark image in header block.But when I resize it a little bit smaller(for instance from 1280px to 1254) the shark image separates from mainav block and show the dark blue zone.
    How can I made to don’t show show the dark blue zone when I resize?

    The link to my web is testweb1.no-ip.biz,You have to click in the folder named CRIS.

    Thanks again

    tilovas Friend
    June 5, 2013 at 9:02 am #494819

    Hi,

    When you resizing window your image decreasing faster than the distance between the modules, I mean you’ve using “padding” of “block-nr1″(t3-header). So you can make simpler, just you need to use two pictures again. Use different blocks. For eg.

    Block nr.1 – use company logo or just write somethink what you want. I now see the note “WELCOME TO MY WEB”
    Block nr.2 – just this img with shark.
    Block nr.3 – your menu (t3-mainnav)
    etc.
    etc. (if necessary)
    Block nr.? – footer

    What blocks do you have, you can see in tamplate manager -> Layout. How to manage them you can read in: Link
    As you can see in documentation, there is code of your blocks:


    <body>

    <?php $this->loadBlock ('header') ?>

    <?php $this->loadBlock ('mainnav') ?>

    <?php $this->loadBlock ('spotlight-1') ?>

    <?php $this->loadBlock ('mainbody') ?>

    <?php $this->loadBlock ('spotlight-2') ?>

    <?php $this->loadBlock ('navhelper') ?>

    <?php $this->loadBlock ('footer') ?>

    </body>

    Make a clone and manage them. You can switch them for your img with shark.

    1 user says Thank You to tilovas for this useful post

    1. il_bujia
    il_bujia Friend
    June 5, 2013 at 9:28 am #494823

    thanks again for the reply.Yes,I used padding in header block.
    My current layout is :
    body>

    <?php $this->loadBlock (‘header’) ?>

    <?php $this->loadBlock (‘mainnav’) ?>

    <?php $this->loadBlock (‘mainbody-home-1’) ?>

    <?php $this->loadBlock (‘footer’) ?>

    And what are you saying(if I understand well)is to put a new block,and in this block put the image of the shark(separated from the background),like this
    body>

    <?php $this->loadBlock (‘header’) ?>

    <?php $this->loadBlock (‘spotlight-1’) ?> put in this block the image of shark

    <?php $this->loadBlock (‘mainnav’) ?>

    <?php $this->loadBlock (‘mainbody-home-1’) ?>

    <?php $this->loadBlock (‘footer’) ?>
    I undestand well?
    But,I have a question.If I put the image of the shark in the spotlight block(in the background I supose),I have to resize this block to show the full image,and I will stay in the same point I’am.
    How can I make it?

    Many thanks

    tilovas Friend
    June 5, 2013 at 11:26 am #494849

    No, don’t use this img like background. Just put in this block by using for eg. custom module. In module position, show position of this new block. Than your img will be always in right position. You may need to replace just a couple of parameters. Like “padding” between modules. For that you should use custom.css file. All I’m saying you need simply put the picture by using “back end”. You don’t need to work all the time with custom.css file.

    1 user says Thank You to tilovas for this useful post

    1. il_bujia
    il_bujia Friend
    June 5, 2013 at 11:31 am #494853

    thanks again!!I’am gonna try it and I tell you

    Many thanks

    il_bujia Friend
    June 5, 2013 at 12:47 pm #494865

    I put a module “Custom html”,and I insert the image of the shark here,but I can’t resize the image to have the same width than main-nav,and I can’t reduce the distance between modules.
    The block is spotlight-2,and I left only one position in this block.
    If you enter to my web,you can see it
    How does it goes?

    I try to put the text”welcome to my web” to the top of image shark,but I have no way too.I upload an image of what I want for this web.

    Thanks a lot

    1. final-image
    il_bujia Friend
    June 5, 2013 at 7:29 pm #494912

    I make some progress but not yet the results that I want to achieve.
    I put this code to resize the spotlight block:

    .t3-sl-2 {width: 70.9%;
    float: left;
    margin-left: 12.3%;
    }
    And It works well even when I resize the window.I put a div to the image of the shark(id=”shark”),and put the following code:

    #shark {float:left;}

    The left side of the shark image was well,even when I resize the window.But the right side of the image doesn’t work good.If I put a width,when I resize the window(more smaller),the left side works very well but the right side shows the dark blue zone.

    Finally,I put this code to reduce the distance between blocks,but there isn’t enough.It keeps showing the dark blue zone

    .t3-sl {padding-top:0;
    padding-bottom:0;}

    What can I do more?

    Many thanks

    il_bujia Friend
    June 8, 2013 at 3:10 pm #495200

    I do it!!I put the image like background oh header’s block and adjust padding.I put the code that I use because it can be helpful to someone.

    .t3-header {background:url(../images/shark.jpg) repeat-x center;
    background-size:100%;
    padding-bottom:23.9%;
    padding-top:0.6%;
    }

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)

This topic contains 10 replies, has 2 voices, and was last updated by  il_bujia 11 years, 5 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum

Important Notice :

New Unified Portal is live

Must Read

Jump to forum

Categories