News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

After modifying index.css, topics below buttons and page counter disappeared

Started by Decent_946, October 08, 2017, 02:02:53 PM

Previous topic - Next topic

Decent_946

Hello SMF Community,

I am using SMF 2.0.14 version. Installed theme is LEVEL by designer studio. Recently, I made some changes in the index.css files just to add post borders ( adding wrapper arround the poster details ). I guess most of you are here familiar with post borders.

Well, the error i am facing is quite wiered. I have added borders in good number of forums developed by me but none of forums have had this kind of issue. And, now i have encountered this issue.

The issue after i add borders in the forum is;
- the topic's below buttons ( reply, Add pol, Notify, Mark Unread, Send Topic and Print ) and the Page counter ( pages: 1 2 3 .. 8 ) disappears.

- When on forum index, a borad has " NEW " post ( reply ) and i click it, inspite of redirecting me to that new made reply or last post, it redirects me to the 1st post of that page of the topic. In short, It should redirect me to the last post made but it takes me to the 1st post of the topics page.
Even when i use ' UNREAD ' section of the forum. There are number of topics with new replies. When i click it, instead of taking me to that last reply, it takes me the 1st reply of that Page of the topics.
==> Note: The URL refers to the new reply made. But takes me to the top post of the page.

Above errors i have never faced earlier. I mostly add borders in every of the forums i design because borders keep everything separated and post's look more beautiful.





In index.css, This is the main code: ( default code of LEVEL THEME )


/* LEVEL THEME */

.poster {
float: left;
width: 15em;
}
.postarea,
.moderatorbar {
margin: 0 0 0 16em;
}
.postarea .flow_hidden {
width: 100%;
}
.moderatorbar {
clear: right;
}

/* Poster details and list of items.
------------------------------------ */
.poster h4,
.poster ul {
padding: 0;
margin: 0 1em 0 1.5em;
}
.poster h4 {
margin: 0.2em 0 0.2em 1.1em;
font-size: 18px;
}
.poster h4,
.poster h4 a {
color: #3A3C42;
font-weight: 600;
}
.poster ul ul {
margin: 0.3em 1em 0 0;
padding: 0;
}
.poster ul ul li {
display: inline;
}
.poster li.stars,
.poster li.avatar,
.poster li.blurb,
li.postcount,
li.im_icons ul {
margin-top: 0.5em;
}
.poster li.avatar {
overflow: hidden;
}
.poster li.warning {
line-height: 1.2em;
padding-top: 1em;
}
.poster li.warning a img {
vertical-align: bottom;
padding: 0 0.2em;
}
.messageicon {
float: left;
margin: 0 0.5em 0 0;
}
.messageicon img {
padding: 6px 3px;
}
.keyinfo {
float: left;
width: 50%;
}
.modifybutton {
clear: right;
float: right;
margin: 6px 20px 10px 0;
text-align: right;
font: bold 0.85em arial, sans-serif;
color: #334466;
}




I modified the above code as below: ( to add post borders. Wrapper mainly. )


/* poster and postarea + moderation area underneath */
.post_wrapper
{
   float:left;
   width:100%;
}
.poster
{
   float: left;
   width: 15em;
}
.postarea, .moderatorbar
{
   margin: 0 0 0 16em;
}
.postarea div.flow_hidden
{
   width: 100%;
}

.moderatorbar
{
   clear: right;
}
/* poster details and list of items */
.poster h4, .poster ul
{
        padding: 0;
        margin: 0 8px;
}
.poster h4
{
        font-size: 120%;
}
.poster h4, .poster h4 a
{
        color: #0474b4;
}
.poster ul ul
{
        margin: 0.3em 1em 0 0;
        padding: 0;
}
.poster ul ul li
{
        display: inline;
        background: none;
        border: none;
}
.poster ul li, .poster h4 {
        background: #fcfcfc;
        border: solid 1px #ddd;
        margin-bottom: 2px;
        text-align: center;
        padding: 4px;
        color: #3f3f3f;
}
.poster ul li {
        width: 94%;
}
.poster li.avatar
{
        overflow: hidden;
}
.poster li.warning
{
        line-height: 1.2em;
        padding-top: 1em;
}
.poster li.warning a img
{
        vertical-align: bottom;
        padding: 0 0.2em;
}
.messageicon
{
        float: left;
        margin: 0 0.5em 0 0;
}
.messageicon img
{
        padding: 6px 3px;
}
.keyinfo
{
        float: left;
        width: 50%;
}
.modifybutton
{
        clear: right;
        float: right;
        margin: 6px 20px 10px 0;
        text-align: right;
        font: bold 0.85em arial, sans-serif;
        color: #334466;
}





Images:


Before the changes in code ( before adding borders )
-> https://i.imgur.com/9LLCdPx.jpg


After the changes in code ( after adding borders )
-> https://i.imgur.com/vylWmR6.jpg

While topics top buttons are uninfected. Before and after.
-> https://i.imgur.com/TvPpN2I.jpg



I want to add these post borders in my forum in a way that it doesn't remove/disappear topics page counter and the below buttons. AND when clicking the NEW post made, it redirects to that new post made / last post instead of the 1st post of that page of the topic.



If you have any further questio, please ask.

- Thanks.
Thankx to RebellioN

Gwenwyfar

You have set .post_wrapper to float: left without clearing what comes after it (.pagesection). You don't even need to add a float there at all, so just remove it.
"It is impossible to communicate with one that does not wish to communicate"

Decent_946

Quote from: Gwenwyfar on October 08, 2017, 04:29:55 PM
You have set .post_wrapper to float: left without clearing what comes after it (.pagesection). You don't even need to add a float there at all, so just remove it.
oh yes. Thanks. This solved my problem. Thank you very much! :)
Thankx to RebellioN

Advertisement: