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.

CSS problem: Left Margin Issue

View previous topic View next topic Go down

Solved CSS problem: Left Margin Issue

Post by Anzo on September 10th 2014, 7:48 pm

Hello.

I have this issue in my forum, where in a normal section the ".pun .post. .user" margin is all good and nice. However, when I made a Blog today, It turned out like this: http://i.imgur.com/GpTc5nq.png

I tried adding margin-left property however It affected the whole forum not only the blogs section. I couldn't find what's wrong in the CSS either.

I'd appreciate some help.

EDIT: I used the resources page, made the left-margin of "element .style" 332px and seems It has fixed the problem. Only thing left is that I can't find that in the actual CSS on my forum ._. (P.S.: it was previously set to "-300px")
Pic: http://imgur.com/LSfjUp9

I also couldn't find "user online" on the forum's CSS.

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: CSS problem: Left Margin Issue

Post by Ange Tuteur on September 10th 2014, 8:08 pm

Hello Anzo,

Could provide us a link to the area on your forum in question ?

Thanks

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: CSS problem: Left Margin Issue

Post by Anzo on September 10th 2014, 8:16 pm


Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: CSS problem: Left Margin Issue

Post by Ange Tuteur on September 10th 2014, 8:33 pm

The element.style is the inline style attribute of the element. e.g. style="margin-left:10px;"

Go to Administration Panel > Display > Templates > General > topics_blog_box

That's the only template related to blogs that I know of.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: CSS problem: Left Margin Issue

Post by Anzo on September 10th 2014, 8:42 pm

Do I require the Founder Account to access the Templates?

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: CSS problem: Left Margin Issue

Post by Ange Tuteur on September 10th 2014, 8:44 pm

Yes, you will need to be the founder to modify the templates.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: CSS problem: Left Margin Issue

Post by Anzo on September 11th 2014, 3:39 am

This is the code i found in that address:

Code:
<!-- BEGIN topics_blog_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
   <!-- BEGIN multi_selection -->
      <script type="text/javascript">
      function check_uncheck_main_{topics_blog_box.row.header_table.BOX_ID}() {
         var all_checked = true;
         for (i = 0; (i < document.{topics_blog_box.FORMNAME}.elements.length) && all_checked; i++) {
         if (document.{topics_blog_box.FORMNAME}.elements[i].name == '{topics_blog_box.FIELDNAME}[]{topics_blog_box.row.header_table.BOX_ID}') {
            all_checked = document.{topics_blog_box.FORMNAME}.elements[i].checked;
         }
         }
         document.{topics_blog_box.FORMNAME}.all_mark_{topics_blog_box.row.header_table.BOX_ID}.checked = all_checked;
      }
      function check_uncheck_all_{topics_blog_box.row.header_table.BOX_ID}() {
         for (i = 0; i < document.{topics_blog_box.FORMNAME}.length; i++) {
         if (document.{topics_blog_box.FORMNAME}.elements[i].name == '{topics_blog_box.FIELDNAME}[]{topics_blog_box.row.header_table.BOX_ID}') {
            document.{topics_blog_box.FORMNAME}.elements[i].checked = document.{topics_blog_box.FORMNAME}.all_mark_{topics_blog_box.row.header_table.BOX_ID}.checked;
         }
         }
      }
      </script>
   <!-- END multi_selection -->

   <div class="main-head">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_blog_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_blog_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
      <h1 class="page-title">{topics_blog_box.row.L_TITLE} [{topics_blog_box.row.COUNT_TOTAL_TOPICS}]</h1>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <tbody class="statused">
<!-- END header_table -->

<!-- BEGIN header_row -->
<strong>{topics_blog_box.row.L_TITLE}</strong>
<!-- END header_row -->

<!-- BEGIN topic -->
   <!-- BEGIN table_sticky -->
      </tbody>
   </table>
   </div>

   <div class="main-head">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_blog_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_blog_box.row.header_table.BOX_ID}" value="0" /   >
      <!-- END multi_selection -->
      <h2>{topics_blog_box.row.topic.table_sticky.L_TITLE} [{topics_blog_box.row.topic.table_sticky.COUNT_TOTAL_TOPICS}]</h2>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <tbody class="statused">
   <!-- END table_sticky -->
      <tr>
         <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
            <!-- BEGIN single_selection -->
            <input type="radio" name="{topics_blog_box.FIELDNAME}" value="{topics_blog_box.row.FID}" {topics_blog_box.row.L_SELECT} />&nbsp;
            <!-- END single_selection -->
            <div class="blog_cal-border">
               <div class="blog_cal-content">
                  <span class="blog_cal-{topics_blog_box.row.FIRST_POST_DMY_CLASS0}">{topics_blog_box.row.FIRST_POST_DMY_VALUE0}</span>
                  <span class="blog_cal-{topics_blog_box.row.FIRST_POST_DMY_CLASS1}">{topics_blog_box.row.FIRST_POST_DMY_VALUE1}</span>
                  <span class="blog_cal-{topics_blog_box.row.FIRST_POST_DMY_CLASS2}">{topics_blog_box.row.FIRST_POST_DMY_VALUE2}</span>
               </div>
            </div>
            <div class="blog_title">
               <span class="status"><img title="{topics_blog_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_blog_box.row.TOPIC_FOLDER_IMG}" alt="{topics_blog_box.row.L_TOPIC_FOLDER_ALT}" /></span>
               {topics_blog_box.row.ICON}&nbsp;{topics_blog_box.row.NEWEST_POST_IMG}{topics_blog_box.row.PARTICIPATE_POST_IMG}&nbsp;
               {topics_blog_box.row.TOPIC_TYPE}&nbsp;<h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_blog_box.row.U_VIEW_TOPIC}">{topics_blog_box.row.TOPIC_TITLE}</a></h2>
               {topics_blog_box.row.GOTO_OPEN} {topics_blog_box.row.GOTO_PAGE_NEW} {topics_blog_box.row.GOTO_CLOSE}&nbsp;
            </div>

            <!-- BEGIN switch_description -->
            <span class="genmed">
               <br />
               {topics_blog_box.row.topic.switch_description.TOPIC_DESCRIPTION}
            </span>
            <!-- END switch_description -->

            <div class="clear"></div>
            <div class="blog_message">
               {topics_blog_box.row.FIRST_POST_TEXT}
            </div>
            <br />
            <div class="blog_comments">
               <span class="gensmall">{topics_blog_box.row.L_BY} <strong>{topics_blog_box.row.TOPIC_AUTHOR}</strong>&nbsp;-&nbsp;
               <a href="{topics_blog_box.row.U_VIEW_TOPIC}#comments">{L_COMMENTS}</a>: {topics_blog_box.row.REPLIES}&nbsp;-&nbsp;
               {L_VIEWS}: {topics_blog_box.row.VIEWS}
            </div>
            <!-- BEGIN multi_selection -->
            <input onclick="javascript:check_uncheck_main_{topics_blog_box.row.BOX_ID}();" type="checkbox" name="{topics_blog_box.FIELDNAME}[]{topics_blog_box.row.BOX_ID}" value="{topics_blog_box.row.FID}" {topics_blog_box.row.L_SELECT} />
            <!-- END multi_selection -->
         </td>
      </tr>
<!-- END topic -->
<!-- BEGIN no_topics -->
<tr>
   <td class="tcl" colspan="4"><strong>{topics_blog_box.row.L_NO_TOPICS}</strong></td>
</tr>
<!-- END no_topics -->

<!-- BEGIN bottom -->
      </tbody>
   </table>
   </div>
   <div class="main-foot clearfix">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_blog_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_blog_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
      <p class="h2">{L_TOPICS} [{topics_blog_box.row.bottom.COUNT_TOTAL_TOPICS}]</p>
      <p class="options">
         <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a>&nbsp;{S_WATCH_FORUM}&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>
      </p>
   </div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_blog_box -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.blog_message', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

I have little experience in HTML and JS, have no clue what I'm looking at.

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: CSS problem: Left Margin Issue

Post by SocialAcademy on September 11th 2014, 9:19 am

Hello Guest, Try to add this to your CSS
Code:
div.user.online {
    margin-left: -332px !important;
}
and it will look like this

SocialAcademy
Forumember

Male Posts : 141
Reputation : 10
Language : JavaScript, CSS, Html, JQuery, C#, C++, Php, Python
Location : Forumotion

http://www.socialacademy.biz

Back to top Go down

Solved Re: CSS problem: Left Margin Issue

Post by Anzo on September 11th 2014, 9:56 am

I feel dump, It was that easy? lol

Thanks a bunch bro, you're a life saver Smile

Anzo
Forumember

Posts : 316
Reputation : 6
Language : English/Arabic
Location : Baghdad - Iraq

http://www.duelacademy.net/forum

Back to top Go down

Solved Re: CSS problem: Left Margin Issue

Post by Ange Tuteur on September 11th 2014, 2:47 pm

Topic archived

If you encounter anymore problems don't hesitate to open a new topic. Smile

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

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