COMMUNITY FORUM

Please note that official support for commercial extensions & templates is provided in the Subscriber Help Desk.
Support requests should ONLY be directed there and require an active subscription plan.
This forum board is to be used for archive purposes and knowledge exchange ONLY.

Search module position

Start
Prev
1
Next
End

emperor
Topic Author
Offline
Premium Member

10 years 7 months ago #138254 by emperor

Search module position was created by emperor

Hi there,

I had to use the search module position for the login button, but it doesn't fit well on the different dimensions.
How can I change this (from what css file?).

Thanks!

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

10 years 7 months ago #138255 by Krikor Boghossian

Replied by Krikor Boghossian on topic Search module position

Hello John,

Generally all of our styles are in the template.css file (apart from the 3rd party extensions).

Since this position does not really have any given dimensions you can specify them at your custom.css file

#siteSearch { width: xx px; }

@media only screen and (max0-width: 900px)
#siteSearch { width: xx px; }
}

@media only screen and (max-width: 600px)
 #siteSearch { width: xx px; }
}

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

10 years 7 months ago #138256 by Krikor Boghossian

Replied by Krikor Boghossian on topic Search module position

<?php if($this->countModules('newsworth_Menu')): ?>
						<nav id="mainNavigation" class="column small-2 large-8 transition">
							<div id="menuToggler"><a href="#" class="icon-hamburger"></a></div>
							<jdoc:include type="modules" name="newsworth_Menu" style="nu" />
						</nav>
						<?php endif; ?>

						<?php if($this->countModules('newsworth_Search')): ?>
						<div id="siteSearch" class="column small-2 large-1 transition">
							<jdoc:include type="modules" name="newsworth_Search" style="nu" />
						</div>
						<?php endif; ?>

Another trick is to change the columns a bit. This snippet will make the search area wider.
Open index.php locate it (<?php if($this->countModules('newsworth_Menu')): ?>) and change it with the snippet I gave you.

Finally you can add some padding to the top.

#siteSearch { padding-top: 15px; }
@media only screen and (max-width: 900px)
#siteSearch { padding-top: 5px; }
}

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

emperor
Topic Author
Offline
Premium Member

10 years 7 months ago #138257 by emperor

Replied by emperor on topic Search module position

Thank you, i worked with the last solution without touching the php, only custom css.

Now, I have another question though.
How can I have another logo-image for specifically small media? (tablets-portrait and mobile phones).
My issue is that the logo is too wide and is pushing the login outside of the boundaries.

Thanks.

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

10 years 7 months ago - 10 years 7 months ago #138258 by Krikor Boghossian

Replied by Krikor Boghossian on topic Search module position

Use this snippet as a base

@media only screen and (max-width: 900px) {
#logoWrap img {  max-width: xx px; height: auto; }
}

If you want to further decrease in other viewports the size just duplicate it and specify a smaller width in the

max-width: 900px

value.

Hint. Chances are you will not need the @media query, with the previous snippet you already have a "skeleton" set up.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

emperor
Topic Author
Offline
Premium Member

10 years 7 months ago #138259 by emperor

Replied by emperor on topic Search module position

I did it (you can check it) but it doesn't work.

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

10 years 7 months ago - 10 years 7 months ago #138260 by Krikor Boghossian

Replied by Krikor Boghossian on topic Search module position

There is a "{" missing on the top media query.
It should be @media only screen and (max-width: 900px) {

You can also try redusing the small-8 class (right above the php snippet I sent you) to small-6 etc...
Just make sure you increase the other two elements classes (The ones in the snippet) to match these changes.
Eg.

You if you change it to small-6 then the other two classes will be small-3 instead of small-2 ( the total should be 12 ).

This is something that applies to a lot of our templates, so you can use it if you want to change dimensions.
Let me know if you want me to send you some tutorials :)

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

emperor
Topic Author
Offline
Premium Member

10 years 7 months ago #138261 by emperor

Replied by emperor on topic Search module position

Hey Krikor,

Thanks once more for the reply.
I found the error.

I'll try to mess around with the php that you adviced, but topic is closed.

Have a great weekend!

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

10 years 7 months ago #138262 by Krikor Boghossian

Replied by Krikor Boghossian on topic Search module position

You 're welcome John :)

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

Start
Prev
1
Next
End