The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to make this design of the widgets

View previous topic View next topic Go down

Solved How to make this design of the widgets

Post by sunshine_222 on January 6th 2015, 3:13 pm

How to make this design for some of the widgets like: Latest topics and some personal widgets? I mean each topic to be in such round row cell.


sunshine_222
Forumember

Posts : 99
Reputation : 3
Language : english

http://thaimagic.forum2x2.eu

Back to top Go down

Solved Re: How to make this design of the widgets

Post by Ange Tuteur on January 7th 2015, 2:43 am

Hello @sunshine_222,

Go to Administration Panel > Display > Portal > mod_recent_topics Edit

Replace the entire template with the following code.
Code:
<!-- BEGIN scrolling_row -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <td class="catLeft" height="25">
 <span class="genmed module-title">{L_RECENT_TOPICS}</span>
 </td>
 </tr>
 <tr>
 <td class="row1" align="left" id="comments_scroll_div">
 <!-- BEGIN recent_topic_row -->
 <a class="recentTopic" onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}">{scrolling_row.recent_topic_row.L_TITLE}</a>

 <!--
 <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.U_POSTER}">{scrolling_row.recent_topic_row.S_POSTER}</a><br /><br />
 -->
 <!-- END recent_topic_row -->
 </td>
 </tr>
</table>

<script type="text/javascript">
//<![CDATA[
$(function(){
 div_marquee('comments_scroll_div', 'comments_scroll_container', '{SCROLL_WAY}', '{SCROLL_STEP}', '{SCROLL_DELAY}', '{SCROLL_HEIGHT}', 'genmed');
});
//]]>
</script>
<!-- END scrolling_row -->

<!-- BEGIN classical_row -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <td class="catHead" height="25"><span class="genmed"><b><center>{L_RECENT_TOPICS}</center></b></span></td>
 </tr>
 <tr>
 <td class="row1" align="left"><span class="gensmall">
 <!-- BEGIN recent_topic_row -->
 <a class="recentTopic" href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a>

 <!--
 <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
 -->
 <!-- END recent_topic_row -->
 </span></td>
 </tr>
</table>
<!-- END classical_row -->

Save and publish. Add


Then go to Display > Colors > CSS stylesheet

Paste the codes below and submit.
Code:
.recentTopic {
display: block !important;
margin: 2px 1px 0;
padding: 2px 5px 5px 30px;
border: 1px solid #B1BFC0;
border-radius: 5px;
background: #F3F9F9 url('http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;
}
.recentTopic:hover {
background-color: #D8DEDE;
}
.recentTopic {
color: #708090 !important;
text-decoration: none !important;
text-shadow: #fff 1px 1px 0px
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to make this design of the widgets

Post by sunshine_222 on January 7th 2015, 10:22 am

Thank you very much, Ange Tuteur, it really works! sunny But is it possible to combine it somehow with this script, so my new topics could be numbered with these colored buttons?

http://s1036.photobucket.com/user/a1tinhgia3/media/image/list.gif.html

the script

in AP/Display/Templates/General/overall_header

this code


Code:
<td valign="top" width="{C1SIZE}">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
</td>



should be replaced by this


Code:
<td valign="top" width="100%">
<div id="center">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
</td></tr><tr>



after that in AP/Display/Templates/Portal/mod_recent_topics
all should be replaced by this


Code:
<style>
div.title {
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #fff;
text-align:center;
}
</style>
<!-- BEGIN classical_row -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="3" align="center"><tbody>
<thead><tr><th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">
<div class="ist">Latest Topics</div>
</th></tr></thead>
<tr>
<td style="padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" width="100%">
<table border="0" cellpadding="0" cellspacing="0" colspan="3" width="100%">

<tr><td class="catHead" colspan="2" width="50%">
<div class="title"><font color="black">Topic</font></div>
</td>
<td class="catHead" colspan="1" width="25%">
<div class="title"><font color="black">History</font></div>
</td>
<td class="catHead" colspan="1" width="25%">
<div class="title"><font color="black">Written by</font></div>
</td></tr>

<tr valign="top">
<td colspan="1" style="border-top: 0px none; padding: 0px; background: transparent url(http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/list.gif) no-repeat scroll center top; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;" width="24"><img src="http://illiweb.com/fa/empty.gif" width="24" border="0"></td><td style="border-top: 0px none; padding: 0px; line-height: 20px; background-repeat: repeat;" align="left" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif" width="50%">

<!-- BEGIN recent_topic_row -->
<a href="{classical_row.recent_topic_row.U_TITLE}"><b><font style="font-family: Tahoma; font-size: 11px">{classical_row.recent_topic_row.L_TITLE}</font></b></a><br>

<!-- END recent_topic_row -->
</td>
<td style="border-top: 0px none; padding: 0px; line-height: 16.5px; background-repeat: repeat;" align="center" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif" width="25%">
<span class="gensmall">
<!-- BEGIN recent_topic_row -->
<img src="http://img816.imageshack.us/img816/9845/11750606.png" width="16px" height="16px" />
{ON} {classical_row.recent_topic_row.S_POSTTIME}
<br><!-- END recent_topic_row -->
</span>
</td>
<td style="border-top: 0px none; padding: 0px; line-height: 17px; background-repeat: repeat;" align="left" background="http://i1036.photobucket.com/albums/a449/a1tinhgia3/image/listbg.gif" width="25%">
<!-- BEGIN switch_poster -->
<a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
<!-- END switch_poster -->
<!-- BEGIN switch_poster_guest -->
{classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
<!-- END switch_poster_guest -->
<!-- BEGIN recent_topic_row -->
<img src="http://www.birazkisisel.com/wp-content/plugins/wp-favorite-posts/img/star.png">
<a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}"><font style="font-family: Tahoma; font-size: 11px">{classical_row.recent_topic_row.switch_poster.S_POSTER}</font></a>
<br><!-- END recent_topic_row -->

</td>
</tr></table></td></tr></tbody></table>
<!-- END classical_row -->




Please, try to help me somehow!

sunshine_222
Forumember

Posts : 99
Reputation : 3
Language : english

http://thaimagic.forum2x2.eu

Back to top Go down

Solved Re: How to make this design of the widgets

Post by Ange Tuteur on January 8th 2015, 5:16 am

So, you want to number the topics in latest topics ? If so, try this :

Go to Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : In the homepage
Code:
$(function() {
 for (var i=0, f=1, a=document.getElementsByTagName('A'); i<a.length; i++) {
  if (/recentTopic/.test(a[i].className)) {
  var n = document.createElement('SPAN');
  n.innerHTML = f, n.className = 'topicNumber topic-'+f;
  a[i].insertBefore(n, a[i].firstChild);
  f++;
  }
 }
});


Then go to Display > Colors > CSS stylesheet

Paste the code below :
Code:
.topicNumber {
 color:#FFF;
 background:#999;
 border-radius:3px;
 display:inline-block;
 padding:1px 3px;
 margin-right:3px;
}
.topicNumber.topic-1 { background:#F60 }
.topicNumber.topic-2 { background:#F60 }
.topicNumber.topic-3 { background:#0C0 }
.topicNumber.topic-4 { background:#0C0 }
.topicNumber.topic-5 { background:#06F }
.topicNumber.topic-6 { background:#06F }
.topicNumber.topic-7 { background:#C3C }
.topicNumber.topic-8 { background:#C3C }

To color the numbers use the following code :
Code:
.topicNumber.topic-# { background:#C3C }

and change the # to the number of the topic.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to make this design of the widgets

Post by sunshine_222 on January 8th 2015, 2:50 pm

Thank you, Ange Tuteur!
But there are few problems:

- The colours in the script has 3 symbols (#F60), while in the drawing programs they are with 6. How to choose the exact colour?

- Is it possible to use these coloured buttons from the script - http://s1036.photobucket.com/user/a1tinhgia3/media/image/list.gif.html,
instead of this one - https://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png

- I've put the script, but it doesn't work.

sunshine_222
Forumember

Posts : 99
Reputation : 3
Language : english

http://thaimagic.forum2x2.eu

Back to top Go down

Solved Re: How to make this design of the widgets

Post by Ange Tuteur on January 8th 2015, 11:26 pm

#F60 is shorthand hex for #FF6600

Put the placement of your script to "In all the pages", I noticed that something on your homepage is causing an error. I can't pinpoint what it is though.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to make this design of the widgets

Post by sunshine_222 on January 9th 2015, 11:24 am

Is it possible than to add our little buttons like these to replace this icon?
https://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png

>#F60 is shorthand hex for #FF6600
Am I right, that there're appearing #??? like this, only when the symbols are doubled?

Yes, I have problems in the forum with the scripts of the toolbar and the position of the main menu. It's still didn't fix. I've already post my request for help.

sunshine_222
Forumember

Posts : 99
Reputation : 3
Language : english

http://thaimagic.forum2x2.eu

Back to top Go down

Solved Re: How to make this design of the widgets

Post by sunshine_222 on January 9th 2015, 11:42 am

I've marked "In all the pages" and now it works! Smile

One more question, how to remove the little icon, in case, that I don't want to leave it there?

sunshine_222
Forumember

Posts : 99
Reputation : 3
Language : english

http://thaimagic.forum2x2.eu

Back to top Go down

Solved Re: How to make this design of the widgets

Post by Ange Tuteur on January 9th 2015, 11:52 pm

Find this in your CSS :
Code:
.recentTopic {
display: block !important;
margin: 2px 1px 0;
padding: 2px 5px 5px 30px;
border: 1px solid #B1BFC0;
border-radius: 5px;
background: #F3F9F9 url('http://i44.servimg.com/u/f44/16/54/26/99/old-ve10.png') no-repeat 5px center;
}

and replace it with this :
Code:
.recentTopic {
display: block !important;
margin: 2px 1px 0;
padding: 2px 5px 5px 2px;
border: 1px solid #B1BFC0;
border-radius: 5px;
background: #F3F9F9;
}

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to make this design of the widgets

Post by sunshine_222 on January 10th 2015, 12:22 am

Thank you, it works, but the coloured "buttons" are not centered in the vertical. How to fix it?

sunshine_222
Forumember

Posts : 99
Reputation : 3
Language : english

http://thaimagic.forum2x2.eu

Back to top Go down

Solved Re: How to make this design of the widgets

Post by Ange Tuteur on January 10th 2015, 12:28 am

Try adding this to your CSS :
Code:
.recentTopic { padding:3px !important }
.topicNumber { text-shadow:none }

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: How to make this design of the widgets

Post by sunshine_222 on January 10th 2015, 12:36 am

Thank you very much, Ange Tuteur! sunny You're great! Now all works perfectly!

sunshine_222
Forumember

Posts : 99
Reputation : 3
Language : english

http://thaimagic.forum2x2.eu

Back to top Go down

Solved Re: How to make this design of the widgets

Post by Base on January 10th 2015, 12:53 am

Solved => Archived

Base
Forumaster

Male Posts : 10386
Reputation : 1687
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum