Forum Support

Shape 5
March 28, 2024, 04:39:32 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: editing "we are passionate about community"  (Read 307 times)
alwo
Jr. Member
**
Offline Offline

Posts: 14



« on: 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.
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: May 27, 2015, 10:44:49 PM »

Hello,

Below is the default coding for the module that you would have to edit.

Code:
<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,
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.