: editing "we are passionate about community"
: alwo May 27, 2015, 01:27:43 AM
Hello,
Please tell me how to edit this part. I would like to add two more buttons, change the icons and the icon showed when the mouse is pointed over...
I want to change the background too.
Thanks.
: Re: editing "we are passionate about community"
: mikenicoll May 27, 2015, 10:44:49 PM
Hello, Below is the default coding for the module that you would have to edit. <div class="icon_area_wrap">
<div class="icon_area_wrap_left" data-scroll-reveal="enter from the left over 1s">
<h2>We Are Passionate About <strong>Community</strong></h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie mi a nunc porta facilisis. Mauris varius volutpat interdum. In quis congue velit.
<br /><br />
Egestas eu, lacinia id sem. Curabitur condimentum nunc vitae quam tincidunt vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie mi.
<br /><br />
<a class="readon" href="index.php/features-mainmenu-47/template-specific-features">Learn More About Us</a>
<div style="clear:both;height:0px;"></div>
</div>
<div class="icon_area_wrap_right">
<div class="icon_set" style="margin-bottom:50px;" data-scroll-reveal="enter from the top after 0s">
<div class="icon_outer_wrap">
<div class="icon_hover">
<a href="index.php/pages/sermons" class="ion-link icon_element"></a>
</div>
<div class="icon_non_hover">
<span class="ion-headphone icon_element"></span>
</div>
</div>
<br />
<span class="icon_bottom_text">Download Sermons</span>
</div>
<div class="icon_set" style="margin-bottom:50px;" data-scroll-reveal="enter from the top after 0.25s">
<div class="icon_outer_wrap">
<div class="icon_hover">
<a href="index.php/pages/news" class="ion-link icon_element"></a>
</div>
<div class="icon_non_hover">
<span class="ion-ios-paper icon_element"></span>
</div>
</div>
<br />
<span class="icon_bottom_text">Read Our Blog</span>
</div>
<div class="icon_set" data-scroll-reveal="enter from the top after 0.5s">
<div class="icon_outer_wrap">
<div class="icon_hover">
<a href="index.php/features-mainmenu-47/template-specific-features" class="ion-link icon_element"></a>
</div>
<div class="icon_non_hover">
<span class="ion-ios-people icon_element"></span>
</div>
</div>
<br />
<span class="icon_bottom_text">Our Church Staff</span>
</div>
<div class="icon_set" data-scroll-reveal="enter from the top after 0.75s">
<div class="icon_outer_wrap">
<div class="icon_hover">
<a href="index.php/events" class="ion-link icon_element"></a>
</div>
<div class="icon_non_hover">
<span class="ion-ios-calendar-outline icon_element"></span>
</div>
</div>
<br />
<span class="icon_bottom_text">Calendar of Events</span>
</div>
<div style="clear:both;height:0px;"></div>
</div>
<div style="clear:both;height:0px;"></div>
</div> You would want to change the text, icon classes for ion-icons directly in this HTML coding above. For things like backgrounds I would add these after the fact with CSS in the custom.css file so you don't have to inline style the CSS. Regards,
|