Joomla Templates Club 406,261 posts

[anjalivasan Friend anjalivasanJoin date: July 2012Posts: 18Downloads:0Uploads:14 Thanks: 5 Thanked: 2 times in 1 posts]

#179670

hello,

i tried to remove the 2 logos (default elastica + t3) and social buttons on the elastica header by:

using the “how to change template logo” instructions —–> my black block logo appears but the 2 template logos also appear, displaced in position. i changed logo-trans.png to my logo’s filename in the code, but that didnt work either.

and by deleting the “social” code under template.css>header —> this made the fb, twitter, g+ and rss show up as text, not buttons, instead of completely removing them.

what should i do to achieve the desired effect :
attached image

ps. i am also trying to get the searchbar to be orange instead of red outlines.
the image the code mentions “/images/icon-search.png” i cant even find on the ftp server, under any subfolder.
what should i do? does anyone know?
thanks
anjali

---

Attachments:

1. 
2. 

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#463206

Taken from the JA demo – so make a backup of layout-normal.css first and save it to your desktop

For the search area

/templates/ja_elastica/css/layout-normal.css @ line 101

#ja-search form.search {
display: none;
background: green; < change here
position: absolute;
top: 35px;
right: 10px;
padding: .5em;
width: 200px;
}


line 93

#ja-search.active .search-btn, #ja-search .search-btn:hover {
width: 30px;
height: 30px;
background-color: green; < change here
margin-top: 5px;
cursor: pointer;
}


for the social buttons – line 127

#ja-social {
height: 40px;
display: none; < add this line
}


to clear down the logo – line 53

h1.logo {
height: 40px !important;
width: 140px !important;
display: none; < add this line
}


Hope that helps!

1 user says Thank You to swissa for this useful post

1. anjalivasan

[anjalivasan Friend anjalivasanJoin date: July 2012Posts: 18Downloads:0Uploads:14 Thanks: 5 Thanked: 2 times in 1 posts]

#463221

THANKS swissa!!! 🙂
i did as you suggested. and my normal layout shows up like i want.
for added measure, i went into the other css files (wide, mobile, tablet…. wherever i found the code – in some cases, it was absent) and made the same changes.
but i dont get the same results in those views.
i have attached (filenames labelled appropriately) screenshots of the various artifacts i am seeing in the different window sizes.
should i be looking elsewhere (Apart from layout-normal etc) for these ?

<em>@swissa 333084 wrote:</em><blockquote>Taken from the JA demo – so make a backup of layout-normal.css first and save it to your desktop

For the search area

/templates/ja_elastica/css/layout-normal.css @ line 101

#ja-search form.search {
display: none;
background: green; < change here
position: absolute;
top: 35px;
right: 10px;
padding: .5em;
width: 200px;
}


line 93

#ja-search.active .search-btn, #ja-search .search-btn:hover {
width: 30px;
height: 30px;
background-color: green; < change here
margin-top: 5px;
cursor: pointer;
}


for the social buttons – line 127

#ja-social {
height: 40px;
display: none; < add this line
}


to clear down the logo – line 53

h1.logo {
height: 40px !important;
width: 140px !important;
display: none; < add this line
}


Hope that helps!</blockquote>

---

Attachments:

1. 
2. 
3. 

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#463223

You could add the whole code to your template.css at the end of the file

#ja-search form.search {display: none;
background: green;
position: absolute;
top: 35px;
right: 10px;
padding: .5em;
width: 200px;
}
#ja-search.active .search-btn, #ja-search .search-btn:hover {
width: 30px;
height: 30px;
background-color: green;
margin-top: 5px;
cursor: pointer;
}
#ja-social {
height: 40px;
display: none;
}
h1.logo {
height: 40px !important;
width: 140px !important;
display: none;
}

That will override all other changes so that this happens on each layout. You may need to fiddle a little as you test but give it a go!

You need to make a small ammendment in the template.css to get rid of the dotted line

Find this code

#ja-search {

• border-bottom: 1px dotted #666 < edit this out with /* at the start and */ at the end
• height: 31px;
• padding: 0 1em;
• position: static;

}

Hopefully that solves it all for you. 😉

[anjalivasan Friend anjalivasanJoin date: July 2012Posts: 18Downloads:0Uploads:14 Thanks: 5 Thanked: 2 times in 1 posts]

#463226

thats a great tip for a newbee to know about : add the code at the end to override all other instance, thank you!

i am able to see the change implemented everywhere. on the super-wide layout tho, the search button does one of thwo things : 1. itmoves to the immediate right of the main menu at the top (instead of the extreme right corner like it is on the normal layouts)… 2. it stays extreme right, slightly shifted from its location….. do you know why that is? just wondering.

i am more concerned about this part – in the super-wide format, the search button shows up (1 or 2 ways) but it doesnt “change” to its grey counterpart upon hovering. it also doesnt let me type anything.. but it does in the other layouts. the search.inputbox code i havent messed with, and so, should it not show?

if the code we put in works across all formats, how do i troubleshoot for the one instance where it doesnt?
i have attached screenshots to show you what i am speaking of.

to get rid of the dotted line-

tried this. did not work. i also tried to change the line to 0 px. nope 🙁
then, i tried – just to understand what exactly the code does – line thickness at 10 px, and then back at 1 px, light grey color. i notice that :
1. the dotted line appears vertically only in single column views.
2. it doesnt appear in normal views.
3. it appears as a thin (or thick when i tried 10 px) line ACROSS, meaning horizontally, the top menu bar. seen in search way 2 image.
HMMMMM.

ah, how i wish you could simply figure it all out for me.
but that wouldnt be fun. i got to learn this ground up 🙂
you are helping enormously tho by pointing me to the right parts of code.
totally appreciate the help!

---

Attachments:

1. 
2. 

1 user says Thank You to anjalivasan for this useful post

1. swissa

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#463232

<em>@anjalivasan 333113 wrote:</em><blockquote>thats a great tip for a newbee to know about : add the code at the end to override all other instance, thank you!
</blockquote>
When you do this you need to be aware that if JA do an upgrade it will overwrite this template.css. I always keep a file of any changes so that I can add them back in if needed.

<em>@anjalivasan 333113 wrote:</em><blockquote>
to get rid of the dotted line-
tried this. did not work. i also tried to change the line to 0 px. nope 🙁
then, i tried – just to understand what exactly the code does – line thickness at 10 px, and then back at 1 px, light grey color. i notice that :
1. the dotted line appears vertically only in single column views.
2. it doesnt appear in normal views.
3. it appears as a thin (or thick when i tried 10 px) line ACROSS, meaning horizontally, the top menu bar. seen in search way 2 image.
HMMMMM.
</blockquote>
I don’t see any line on any setting in either Chrome or Safari or Tor. I don’t have IE so couldn’t tell you about that but check to see if there is a special ie.css but you’re running Safari too which is strange. Clear down the browser cache and also the cache in Joomla including T3.

<em>@anjalivasan 333113 wrote:</em><blockquote>
i am able to see the change implemented everywhere. on the super-wide layout tho, the search button does one of thwo things : 1. it moves to the immediate right of the main menu at the top (instead of the extreme right corner like it is on the normal layouts)… 2. it stays extreme right, slightly shifted from its location….. do you know why that is? just wondering.

i am more concerned about this part – in the super-wide format, the search button shows up (1 or 2 ways) but it doesnt “change” to its grey counterpart upon hovering. it also doesnt let me type anything.. but it does in the other layouts. the search.inputbox code i havent messed with, and so, should it not show?

if the code we put in works across all formats, how do i troubleshoot for the one instance where it doesnt?
i have attached screenshots to show you what i am speaking of.
</blockquote>
I can see it on your fotos but I haven’t had time to go through your css (I don’t have Elastica myself). I’ll also have a look at the JA demo css and see if I can spot a difference unless one of the mods or support guys jumps in first.

To trouble shoot, set the format with the browser window and then use Chrome developer or Firebug to check the css. It should show up the right css files for you.

<em>@anjalivasan 333113 wrote:</em><blockquote>ah, how i wish you could simply figure it all out for me.
but that wouldnt be fun. i got to learn this ground up
you are helping enormously tho by pointing me to the right parts of code.
totally appreciate the help!</blockquote>

Great attitude! 🙂 😎

Well done and good luck with the site!

EDIT: One extra pointer for ALL newbies. Make sure you do regular BACKUPS of the site! 🙂

[anjalivasan Friend anjalivasanJoin date: July 2012Posts: 18Downloads:0Uploads:14 Thanks: 5 Thanked: 2 times in 1 posts]

#463349

um…. what does this mean?
“set the format with the browser window and then use Chrome developer or Firebug to check the css. It should show up the right css files for you.”

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#463372

Sorry, not my best explanation! Use Chrome or Firebug and size the browser window to the desired view and then locate the css. It should automatically be showing the right css file.

1 user says Thank You to swissa for this useful post

1. anjalivasan

[Author]

Posts