Author Topic: "It's that easy" graphic?  (Read 2844 times)

Karado58

  • Prime Member
  • ****
  • Posts: 103
  • Karma: +0/-0
"It's that easy" graphic?
« on: January 16, 2011, 07:23:53 PM »
Hello Maverick and everyone else!

Is it possible to replace the existing box "It's that easy",  "/* Description box */" with a single graphic, same size?

Thank you.
Joseph

Johnboy

  • Global Moderator
  • Veteran Member
  • *****
  • Posts: 566
  • Karma: +40/-2
Re: "It's that easy" graphic?
« Reply #1 on: January 16, 2011, 08:10:06 PM »
Its that easy if you just want to replace the graphic of the 'magnifying glass with the people figures' But if you want to change the whole box, you would need to delete the text in the box on your index.html page and replace it with a graphic, you probably will have to play around with the css as well.
I LOVE these forums!!! So helpful...

maverick

  • Administrator
  • Veteran Member
  • *****
  • Posts: 3139
  • Karma: +211/-7
    • Maverick Webworks
Re: "It's that easy" graphic?
« Reply #2 on: January 16, 2011, 09:08:44 PM »
If you want to replace the entire "It's that easy" description box with an image and/or some text, there's 2 options.

Option #1 - if you want to retain the frame and border with rounded corners.

 in your index.html file simply change this...
Code: [Select]
<div id="description" class="content_area large">
<h1>It's that easy</h1>
<div class="box_content">
<ul>
<li id="description-search" class="description-box">
<h3>Search</h3>
<p>our thousands of members.</p>
</li>
<li id="description-meet" class="description-box">
<h3>Meet</h3>
<p>new people for friendship and more.</p>
</li>
<li id="description-have-fun" class="description-box">
<h3>Have fun</h3>
<p>there's nothing like a real date.</p>
</li>
<li id="description-more" class="description-box">
<a href="{tplvars.relative_url}join.php" id="sign-up-now" title="Sign up now!">Sign up now!</a>
<h4>and a lot more</h4>
<p>Flirts, messages, photos, blogs, alerts...</p>
</li>
</ul>
</div>
</div>
to this ...
Code: [Select]
<div id="description" class="content_area large">
<h1>/h1>
<div class="box_content">
<img src="{tplvars.tplurl}/images/my_image.jpg" alt="Image Name" />
</div>
</div>


Option #2 - if you don't want to retain the frame and border with rounded corners.

 in your index.html file simply change this...
Code: [Select]
<div id="description" class="content_area large">
<h1>It's that easy</h1>
<div class="box_content">
<ul>
<li id="description-search" class="description-box">
<h3>Search</h3>
<p>our thousands of members.</p>
</li>
<li id="description-meet" class="description-box">
<h3>Meet</h3>
<p>new people for friendship and more.</p>
</li>
<li id="description-have-fun" class="description-box">
<h3>Have fun</h3>
<p>there's nothing like a real date.</p>
</li>
<li id="description-more" class="description-box">
<a href="{tplvars.relative_url}join.php" id="sign-up-now" title="Sign up now!">Sign up now!</a>
<h4>and a lot more</h4>
<p>Flirts, messages, photos, blogs, alerts...</p>
</li>
</ul>
</div>
</div>
to this ...
Code: [Select]
<div id="description">

                <div class="box_content">
<img src="{tplvars.tplurl}/images/my_image.jpg" alt="Image Name" />
                </div>

</div>

and your your index.css file change this ...
Code: [Select]
#description {
margin: 18px 0;
overflow: hidden;
font-size: 14px;
}
to this ...
Code: [Select]
#description {
margin: 25px 10;
overflow: hidden;
font-size: 14px;
min-width: 740px;

}

#description .box_content {
width: 700px;
 
}


Fusion Responsive Template & Free Mods
http://www.maverickwebworks.com
DO NOT PM me asking for personal help. Post your problem or request in the forums so the entire community can contribute and benefit.

Karado58

  • Prime Member
  • ****
  • Posts: 103
  • Karma: +0/-0
Re: "It's that easy" graphic?
« Reply #3 on: January 16, 2011, 11:19:29 PM »
Maverick: I just do not know how all of us on this forum can ever thank you enough for your continuous unselfish help!!
Thank you again!!!
Joseph

wrs06

  • Confirmed Member
  • **
  • Posts: 19
  • Karma: +0/-0
Re: "It's that easy" graphic?
« Reply #4 on: April 29, 2011, 04:01:02 PM »
I would like to put another box under this one but with no graphics just text. Any idea I have looked it over but not able to figure out where the image files are to remove from this box. I copied the code and pasted it under the first code and it gave me two It's That Easy boxes. But it also gave me the images and the dots. I just need an open box for text to fall under this box.

maverick

  • Administrator
  • Veteran Member
  • *****
  • Posts: 3139
  • Karma: +211/-7
    • Maverick Webworks
Re: "It's that easy" graphic?
« Reply #5 on: April 29, 2011, 05:14:29 PM »
To create another box with just text simply copy the one above but remove all the list items and just add text instead, like this ....

Code: [Select]
<div id="description" class="content_area large">
<h1>Heading Here</h1>
<div class="box_content">
                     Text Goes Here ....
</div>
</div>

Fusion Responsive Template & Free Mods
http://www.maverickwebworks.com
DO NOT PM me asking for personal help. Post your problem or request in the forums so the entire community can contribute and benefit.