Forum Support

Shape 5
March 28, 2024, 01:55:45 PM *
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: Risen Hope template background module  (Read 515 times)
Enzo1000
Jr. Member
**
Offline Offline

Posts: 13



« on: July 01, 2015, 08:30:13 AM »

Hello,

how can I change the background image, in Risen Hope template, of the module that in demo is "We are passionate about community" ? (Static during scrolling).
In which folder are there the icons of this module?

Thank you,

Enzo
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: July 01, 2015, 06:15:10 PM »

Hello,

1) You can change the background under the Backgrounds Tab in the Template Manager for the appropriate row.

2) These icons are called via a custom html module in the top_row3_1 position.
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
Enzo1000
Jr. Member
**
Offline Offline

Posts: 13



« Reply #2 on: July 02, 2015, 07:01:44 AM »

Hello,

thank you for your answer. My website is www.gesucristo.info
I've solved the first step (the background). About the icons, I can understand that are included with the template, so they aren't image files.
Is it possible to use classic image files like .jpg, .png, .gif ? And the article links?

The code of the module is:

<div class="icon_area_wrap">
<div class="icon_area_wrap_left" data-scroll-reveal="enter from the left over 1s">
<h2><span style="color: #0000ff;">We Are Passionate About <strong>Community</strong></span></h2>
<span style="color: #0000ff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie mi a nunc porta facilisis. Mauris varius volutpat interdum. In quis congue velit. </span>

<span style="color: #0000ff;"> Egestas eu, lacinia id sem. Curabitur condimentum nunc vitae quam tincidunt vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam molestie mi. </span>

<span style="color: #0000ff;"> <a href="index.php/features-mainmenu-47/template-specific-features" class="readon" style="color: #0000ff;">Learn More About Us[/url]</span>
<div style="clear: both; height: 0px;">&nbsp;</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"><span style="color: #0000ff;"><a href="index.php/pages/sermons" class="ion-link icon_element" style="color: #0000ff;">[/url]</span></div>
<div class="icon_non_hover"><span class="ion-headphone icon_element" style="color: #0000ff;"></span></div>
</div>

<span class="icon_bottom_text" style="color: #0000ff;"> 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"><span style="color: #0000ff;"><a href="index.php/pages/news" class="ion-link icon_element" style="color: #0000ff;">[/url]</span></div>
<div class="icon_non_hover"><span class="ion-ios-paper icon_element" style="color: #0000ff;"></span></div>
</div>

<span class="icon_bottom_text" style="color: #0000ff;"> 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"><span style="color: #0000ff;"><a href="index.php/features-mainmenu-47/template-specific-features" class="ion-link icon_element" style="color: #0000ff;">[/url]</span></div>
<div class="icon_non_hover"><span class="ion-ios-people icon_element" style="color: #0000ff;"></span></div>
</div>

<span class="icon_bottom_text" style="color: #0000ff;"> 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"><span style="color: #0000ff;"><a href="index.php/events" class="ion-link icon_element" style="color: #0000ff;">[/url]</span></div>
<div class="icon_non_hover"><span class="ion-ios-calendar-outline icon_element" style="color: #0000ff;"></span></div>
</div>

<span class="icon_bottom_text" style="color: #0000ff;"> Calendar of Events</span></div>
<div style="clear: both; height: 0px;">&nbsp;</div>
</div>
<div style="clear: both; height: 0px;">&nbsp;</div>
</div>

Thank you and best regards,

Enzo
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: July 03, 2015, 07:24:29 PM »

Hello,

You would really want to use the ion-icons for simplicity. If you wish to use images you would have to manually code these in and remove the ion-icon calls. Here is an example of a simple image call.

Code:
<img class="imageclassname" alt="imagename" src="/demo/risenhope/images/imagesource.jpg">
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
Enzo1000
Jr. Member
**
Offline Offline

Posts: 13



« Reply #4 on: July 04, 2015, 06:47:46 AM »

Thank you for your answer and the code.
You are right, icons are good.
I have found a list of icon names in this page: http://www.shape5.com/demo/images/general/ionicons/cheatsheet.html
Is it enough?
How can I define the icon size?

Enzo
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: July 06, 2015, 11:42:54 AM »

Hello,

In the custom.css file you can stylize the icons with the class names.

.ion-alert {
background-color: #ff000;
height: 20px;
width: 20px;}
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
Enzo1000
Jr. Member
**
Offline Offline

Posts: 13



« Reply #6 on: July 06, 2015, 03:03:46 PM »

Thank you very much.

Enzo
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #7 on: July 07, 2015, 07:00:59 PM »

NP Smiley
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.