[Solved]Please look for this problem somebody ,, Highlighter position

hi there Please i want to change highlighter position becuase of banner , you can see in in atachment why and i would like somebody to help be i can change position in module from highlighter to topmenu2 but it dosnt shows up in good way... im going to atach my template.css and pictures hoping that somebody can make that for me , if it is possible to do how to change font color for highlighter to white ?
Im changing template.txt becuase of allowed extensions ,..


Thanks i hope somebody will answer me....

See attached images on how this looks, article text is centered, dark and light versions as there were other requests for breadcrumb position...
Backup your files before starting this mod.

Dark Version ( MiddleMenu Position look alike )

STEP 1:

Find File: templatesgk_twn2layoutsblockslogo.php
Delete Lines : 54 to 58 which is

Code: Select all

   <?php if($this->modules('highlighter')) : ?>
   <div id="gkHighlighter">
      <jdoc:include type="modules" name="highlighter" style="<?php echo $this->module_styles['highlighter']; ?>" />
   </div>
   <?php endif; ?>   


STEP 2:

Find File: templatesgk_twn2layoutsdefault.php
Lines: 85 to 93 which is

Code: Select all

             <?php else: ?>
             
                <?php if($this->modules('middlemenu')) : ?>
                <div id="gkMiddleMenu" class="clear">
                   <jdoc:include type="modules" name="middlemenu" style="<?php echo $this->module_styles['middlemenu']; ?>" />
                </div>
                <?php endif; ?>
             
             <?php endif;?>


Add below code after first: " <?php endif; ?>"

Code: Select all

         <?php if($this->modules('highlighter')) : ?>
         <div id="gkHighlighter" class="clear">
            <jdoc:include type="modules" name="highlighter" style="<?php echo $this->module_styles['highlighter']; ?>" />
         </div>
         <?php endif; ?>


So it looks like below

Code: Select all

             <?php else: ?>
             
                <?php if($this->modules('middlemenu')) : ?>
                <div id="gkMiddleMenu" class="clear">
                   <jdoc:include type="modules" name="middlemenu" style="<?php echo $this->module_styles['middlemenu']; ?>" />
                </div>
                <?php endif; ?>
         <?php if($this->modules('highlighter')) : ?>
         <div id="gkHighlighter" class="clear">
            <jdoc:include type="modules" name="highlighter" style="<?php echo $this->module_styles['highlighter']; ?>" />
         </div>
         <?php endif; ?>
             <?php endif;?>


STEP 3:

Find File: templatesgk_twn2cssgk.stuff.css
Lines: 11 to 19
Which is below

Code: Select all

/*
 * Highlighter GK4
 */
#gkHighlighter .gkHighlighterGK4 { overflow:hidden; position:relative; height:12px; line-height:10px; width: 100%; }
#gkHighlighter .gkHighlighterWrapper { float:left; height:21px; position:relative; overflow: hidden; }
#gkHighlighter .gkHighlighterWrapper .nowrap { width: 100000px; position: absolute; left: -99999em; }
#gkHighlighter .gkHighlighterWrapper .gkHighlighterItem { position: absolute; top:0; width:100%; left:0; font-size: 11px; line-height: 10px;  color: #777;  }
#gkHighlighter .gkHighlighterWrapper .gkHighlighterItem a { color: #777; text-shadow: 0 1px #fff }
#gkHighlighter .gkHighlighterWrapper .gkHighlighterItem a:hover { color: #000; }


Change whole 11 to 19 with below code:

Code: Select all

/*
 * Highlighter GK4
 */
#gkHighlighter .gkHighlighterGK4 { overflow:hidden; position:relative; height:30px; line-height:30px; width: auto; padding-left:10px; padding-right: 10px; }
#gkHighlighter .gkHighlighterWrapper { float:left; height:21px; position:relative; overflow: hidden; }
#gkHighlighter .gkHighlighterWrapper .nowrap { width: 100000px; position: absolute; left: -99999em; }
#gkHighlighter .gkHighlighterWrapper .gkHighlighterItem { position: absolute; width:98%; color: #FFFFFF; font-size: 10px; line-height: 31px !important; text-transform: uppercase; text-align:center; font-family: Arial,Helvetica,sans-serif; }
#gkHighlighter .gkHighlighterWrapper .gkHighlighterItem a { color: #fff; }
#gkHighlighter .gkHighlighterWrapper .gkHighlighterItem a:hover { color: #fff; text-decoration: underline; }


STEP 4:

Find file: templatesgk_twn2csstemplate.css
Line: 101 which is below

Code: Select all

/* top highlighter */
#gkHighlighter { position: absolute; left: 0; bottom: 8px; width: 100%;  }


Replace with below:

Code: Select all

/* top highlighter */
#gkHighlighter { background-attachment: scroll; background-clip: border-box; background-color: #3B3B3B; background-image: url("../images/dropline_bg.jpg"); background-origin: padding-box; background-position: left bottom; background-repeat: repeat-x; background-size: auto auto; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 0; border-top-right-radius: 0; height: 31px; }


For Light Version:

STEP 1: Same as step 1 in dark version...

STEP 2:
Find File: templatesgk_twn2layoutsdefault.php
Lines: 95 to 108 which is

Code: Select all

             <div id="gkBottomMenu" class="clear">
                <?php if($this->modules('breadcrumb')) : ?>
                <div id="gkBreadcrumb">
                   <jdoc:include type="modules" name="breadcrumb" style="<?php echo $this->module_styles['breadcrumb']; ?>" />
                </div>
                <?php endif; ?>   
                
                <?php if($this->modules('topmenu2')) : ?>
                <div id="gkTopMenu2">
                   <jdoc:include type="modules" name="topmenu2" style="<?php echo $this->module_styles['topmenu2']; ?>" />
                </div>
                <?php endif; ?>
             </div>
        </div>


Add below between last </div>'s :

Code: Select all

         <?php if($this->modules('highlighter')) : ?>
         <div id="gkHighlighter" class="clear">
            <jdoc:include type="modules" name="highlighter" style="<?php echo $this->module_styles['highlighter']; ?>" />
         </div>
         <?php endif; ?>


So it looks like below:

Code: Select all

             <div id="gkBottomMenu" class="clear">
                <?php if($this->modules('breadcrumb')) : ?>
                <div id="gkBreadcrumb">
                   <jdoc:include type="modules" name="breadcrumb" style="<?php echo $this->module_styles['breadcrumb']; ?>" />
                </div>
                <?php endif; ?>   
                
                <?php if($this->modules('topmenu2')) : ?>
                <div id="gkTopMenu2">
                   <jdoc:include type="modules" name="topmenu2" style="<?php echo $this->module_styles['topmenu2']; ?>" />
                </div>
                <?php endif; ?>
             </div>
         <?php if($this->modules('highlighter')) : ?>
         <div id="gkHighlighter" class="clear">
            <jdoc:include type="modules" name="highlighter" style="<?php echo $this->module_styles['highlighter']; ?>" />
         </div>
         <?php endif; ?>
        </div>


STEP 3:

Find File: templatesgk_twn2cssgk.stuff.css
Lines: 11 to 19
Which is below

Code: Select all

/*
 * Highlighter GK4
 */
#gkHighlighter .gkHighlighterGK4 { overflow:hidden; position:relative; height:12px; line-height:10px; width: 100%; }
#gkHighlighter .gkHighlighterWrapper { float:left; height:21px; position:relative; overflow: hidden; }
#gkHighlighter .gkHighlighterWrapper .nowrap { width: 100000px; position: absolute; left: -99999em; }
#gkHighlighter .gkHighlighterWrapper .gkHighlighterItem { position: absolute; top:0; width:100%; left:0; font-size: 11px; line-height: 10px;  color: #777;  }
#gkHighlighter .gkHighlighterWrapper .gkHighlighterItem a { color: #777; text-shadow: 0 1px #fff }
#gkHighlighter .gkHighlighterWrapper .gkHighlighterItem a:hover { color: #000; }


Change whole 11 to 19 with below code:

Code: Select all

/*
 * Highlighter GK4
 */
#gkHighlighter .gkHighlighterGK4 { overflow:hidden; position:relative; height:30px; line-height:30px; width: auto; padding-left:10px; padding-right: 10px; }
#gkHighlighter .gkHighlighterWrapper { float:left; height:21px; position:relative; overflow: hidden; }
#gkHighlighter .gkHighlighterWrapper .nowrap { width: 100000px; position: absolute; left: -99999em; }
#gkHighlighter .gkHighlighterWrapper .gkHighlighterItem { position: absolute; width:98%; color: #686868; font-size: 10px; line-height: 31px !important; text-transform: uppercase; text-align:center; font-family: Arial,Helvetica,sans-serif; }
#gkHighlighter .gkHighlighterWrapper .gkHighlighterItem a { color: #686868; }
#gkHighlighter .gkHighlighterWrapper .gkHighlighterItem a:hover { color: #000; text-decoration: underline; }


STEP 4:

Find file: templatesgk_twn2csstemplate.css
Line: 101 which is below

Code: Select all

/* top highlighter */
#gkHighlighter { position: absolute; left: 0; bottom: 8px; width: 100%;  }


Replace with below:

Code: Select all

/* top highlighter */
#gkHighlighter { height: 31px; background: #fafafa url('../images/breadcrumbs_bg.png') repeat-x left bottom; border-bottom: 1px solid #c3c3c3; border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; }


wuaaaa norman just thank you nothing but thank you so much im trying this hope im going to do right im going to post ya back thanks

normanUK , i did all what you said but its just didnt work im here you have pic how it shows and all files that i edited please just chek i think that i have done it right but please just check it please?

i changed the name gk.stuff.css to txt to upload
template.css to .txt.
default to .txt
and logo to .txt

Please just check these files?

and position that i chose for highlighter module was middlemenu

Its not getting its css i think, do you have an online link we can check?

so i didnt make any mistake pasting what you was telling me ??

yes shekullixxi.com/shekulli

other problem that i have is big size of article title

for example go to this...
http://www.shekullixxi.com/shekulli/ind ... -nje-prove


Thank you, please look to that problem of highlight,

Please if you dont mind contact me at [email protected] , i will send my admin and pass , and ftp infos to fix that for me , if you have time ... thank you normanUK , by the way which is your favorite team in football of course:D

Although the template.css you have attached is a working copy , the one in your website is an old version, so can you recheck that first please...

for font size add below to your css override... Change 48 and height to what suits to you...

Code: Select all

#gkComponent > div > h1, #gkComponent > div > h2, #gkComponent > div > h1 a, #gkComponent > div > h2 a {
    font-size: 48px;
    line-height: 72px;
    margin-bottom: 0;
}


Thanks for the font size code its works ? i dont understand what do you mean the old ?? its the same that i have atached ? please i love this highlight can you please contact me by mail a will send my infos and you can fix it in a minute when you have time?


Thanks...

okey now i recheck please check now becuase , when i saw that is not working i have replace template.css and i have forget to replace it back, check again please ?

You are missing STEP 4 in this file :

Code: Select all

http://www.shekullixxi.com/shekulli/templates/gk_twn2/css/template.css


Which you didnt change following code.

Code: Select all

/* top highlighter */
#gkHighlighter { position: absolute; left: 0; bottom: 8px; width: 100%;  }


However the template.css you have attached in this topic you have done STEP4, in your website you havent....

i changed everything but when i didnt work i redo the changes and i forget to put that back now its okey

what i did in template css is..
this the copy of template.css everything is in right place but i dont know why isnt working ?
#gkTools { float: right; }
#gkTools a { display: block; float: right; width: 11px; height: 9px; margin: 7px 0 0 3px; text-indent: -99999em; background: transparent url('../images/font_size.png') no-repeat -44px 0; }
a#gkToolsReset { background-position: -24px 0; margin-left: 6px }
a#gkToolsDec { background-position: 0 0 }
/* top highlighter */
#gkHighlighter { height: 31px; background: #fafafa url('../images/breadcrumbs_bg.png') repeat-x left bottom; border-bottom: 1px solid #c3c3c3; border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; }


but isnt working yet??? please i know that u dont have to help me, thats why i appreciate to much your help , but can u send me mail i can sent u my infos and u can fixit right away isnt more simple this way ???

Thanks by the way....

send an email to normanUK at live.co.uk

Edit:

Fixed.....

Just wanted to Thanks NormanUK in public he fixed my problem






100000000 thanks goes to him..

No problem at all... If you can change the title to [Solved] please

did it.