Joomla Templates Club 406,261 posts

[rugarer Friend rugarerJoin date: May 2013Posts: 54Downloads:10Uploads:16 Thanks: 10 Thanked: 1 times in 1 posts]

#192205

Hi

How do I add an image or two if possible to the slogan without affecting the text and margin sizes. I tried to place the image and the text into a table with the one image to the left of the text, but this affected the margins and size of the slogan position.

Is there a way yo do this easier without using a table.

The look or effect I am after is seen on my example here – http://digilink.co.zw/lextrad/

Help???

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#512075

It’s very difficult if you are non-technical because it needs to customize from script code and css style

For example

+ Script code

<div class="site-slogan hidden-phone animate-text inview>
<div class="item-image">
<a class="article-link" href="#" title="Billboard Music Awards Tickets Are On Sale">
<img title="Billboard Music Awards Tickets Are On Sale" src="/images/joomlart/demo/photo/photo2-thumb.jpg" alt="Billboard Music Awards Tickets Are On Sale">
</a>
</div>

<div class="item-desc">
<h2 class="article-title">
<a class="article-link" href="#"> Billboard Music Awards Tickets Are On Sale</a>
</h2>
<section class="article-intro clearfix">
<p>New Music USA was formed by the merger of the American Music Center and Meet The Composer, two organizations with decades of experience serving the needs of the new music community. On November 8, 2011, their merger was completed and New Music USA was created to strengthen and grow the new music community.</p>
<p>New Music USA approached us with the task of bringing their look into the 21st century. We then applied the brand to its online presence, building a fully responsive WordPress-based website that showcases musician stories and makes it easy for donors to give online.</p>
<p>The website was featured on various design showcase sites and was an <a href="#">Awwwards Site of the Day in October 2012.</a></p> </section>
</div>
</div>

+ Css style


.site-slogan {
width:100%;
}
.site-slogan .item-image {
float:left;
width:30%;
}
.site-slogan .item-desc {
float:right;
width:70%;
}


[Author]

Posts