Joomla Templates Club 406,261 posts

[bcollie Friend bcollieJoin date: February 2010Posts: 28Downloads:0Uploads:4 Thanks: 6 Thanked: 1 times in 1 posts]

#194106

I have adopted the ‘home-style-2’ layout (Megamenu on the left side of screen) in JA Beranis because it leaves the top of the screen vacant – which plays well with ‘sliders’ from #NoNumber.

However when a submenu pops out from the main menu, it pops out to the right onto the main page and obscures the text in the ‘slogan’ position (well at least the top slogan position anyway)

Can someone point out which CSS change is needed to make the slogan text ‘fly out’ from left to the right of the screen and stay there – so the user can still see it when a submenu pops out?

I haven’t found this mentioned before in the forum

[Hayden A Friend Hayden AJoin date: April 2010Posts: 282Downloads:0Uploads:20 Thanked: 54 times in 53 posts]

#519944

You need open …templatesja_beranistplsblocksheader-home-2.php file,

Replace:
[PHP]<!– LOGO –>
<div class=”span2 logo “>
<div class=”logo-<?php echo $logotype ?>”>
<h1>
<a href=”<?php echo JURI::base(true) ?>” title=”<?php echo strip_tags($sitename) ?>”<?php echo $logoimage ?>>
<span><?php echo $sitename ?></span>
</a>
</h1>
<small class=”site-slogan hidden-phone”><?php echo $slogan ?></small>
</div>
</div>
<!– //LOGO –>[/PHP]

With:
[PHP]<!– LOGO –>
<div class=”span2 logo animate-left-box”>
<div class=”logo-<?php echo $logotype ?>”>
<h1>
<a href=”<?php echo JURI::base(true) ?>” title=”<?php echo strip_tags($sitename) ?>”<?php echo $logoimage ?>>
<span><?php echo $sitename ?></span>
</a>
</h1>
<small class=”site-slogan hidden-phone”><?php echo $slogan ?></small>
</div>
</div>
<!– //LOGO –>[/PHP]
– Create a new css file named: custom.css in templatesja_beraniscss directory
– Add following CSS rule to the custom.css file:
[PHP].home-style-2 .t3-header .logo {
width: 100% !important;
text-align: right;

}[/PHP]

Hope that helps.

[bcollie Friend bcollieJoin date: February 2010Posts: 28Downloads:0Uploads:4 Thanks: 6 Thanked: 1 times in 1 posts]

#520227

I can probably learn from this but it was the slogan field I wanted to slide to the right – not the header.

Currently the Slogan appears from the right (like a PowerPoint effect) and slides across to the left of screen – where it becomes hidden when a submenu is opened from the Megamenu (which is hanging out on the left side of screen form because of the home-style-2).

[bcollie Friend bcollieJoin date: February 2010Posts: 28Downloads:0Uploads:4 Thanks: 6 Thanked: 1 times in 1 posts]

#520945

Any possible answer to this ?

[Hayden A Friend Hayden AJoin date: April 2010Posts: 282Downloads:0Uploads:20 Thanked: 54 times in 53 posts]

#521120

@ bcollie,
If you want “text in the Slogan position slide from left to right” you need open custom.css file in templatesja_beraniscss
and remove CSS as I suggest above
[PHP].home-style-2 .t3-header .logo {
width: 100% !important;
text-align: right;

} [/PHP]

and add following CSS rule to the custom.css file:

[PHP].home-style-2 .t3-header .logo {
width: 100% !important;
}

.home-style-2 .t3-header .logo small{
float: right;
}[/PHP]

It’s best if you post your site’s URL here and screenshot illustrate how you want to achieve.

[bcollie Friend bcollieJoin date: February 2010Posts: 28Downloads:0Uploads:4 Thanks: 6 Thanked: 1 times in 1 posts]

#521325

Hi Hayden
I guess it is confusing for you when Joomlart name two objects in the JA Beranis Template as ‘slogan’.

You will see that on the ‘Theme’ page of the template there is a FIELD called ‘Slogan’ – just below the FIELD called ‘Site Name’.

When you look at the ‘Layout’ page of the template there is a default MODULE POSITION called ‘Slogan’ with a span of 12 , just above Module Positions 1-4.

It is the text in the Module POSITION I have been talking about.

Its default behaviour is to appear from the right hand side of the screen and slide across to the left e.g. the JA Beranis Demo which has the text “Beranis Apply Human-Centered Design to Help Businesses Thrive in a Connected World” in the Slogan POSITION..

I want my Slogan POSITION text to slide from left to right.

See the attached picture for an example of the problem – you will notice that part of the slogan POSITION has been obscured.

Try it out at http://www.dreamwoodinternational.com/joomla32– note this site is still being developed.

---

Attachments:

1. 

[Hayden A Friend Hayden AJoin date: April 2010Posts: 282Downloads:0Uploads:20 Thanked: 54 times in 53 posts]

#521430

@bcollie,
My apology for not getting question about the slogan text right.
In order to change Slogan position, you need follow steps below:

1. Fist you need backup your site
2. Add following CSS rule to the custom.css file:

[PHP].ja-slogan .site-slogan, .t3-slogan .site-slogan {
text-align: right;
}
.ja-slogan .site-slogan.animate-text p {
right: 800px;
opacity: 0;
filter: alpha(opacity=0);
position: relative;
-webkit-transition: all 1s ease-out 0s;
-moz-transition: all 1s ease-out 0s;
-o-transition: all 1s ease-out 0s;
transition: all 1s ease-out 0s;
}

.ja-slogan .site-slogan.animate-text.inview p {
right: 0;
left: auto;
opacity: 1;
}[/PHP]

Hope it helps.

1 user says Thank You to Hayden A for this useful post

1. bcollie

[bcollie Friend bcollieJoin date: February 2010Posts: 28Downloads:0Uploads:4 Thanks: 6 Thanked: 1 times in 1 posts]

#521525

Thank you Hayden
Seems to be perfect:)

[Author]

Posts