Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 Macro Issues
#
Hello there!

I'm attempting to implement color-changing macros on my board and for some reason, it seems to only work on forums that don't have subforums/aren't redirect forums. I've attached screenshots to show what's happening - I'm happy to provide a test login to my site if needed.

Any idea on what might be causing this? On a previous skin, we had a color-changing macro and it worked just fine, but I'm not sure what the issue is here.

Screenshot 1
Screenshot 2
Screenshot 3

CSS (just for the macros and the subforums - happy to provide it all if needed!)
CODE

.marker {
   background-color: #222;
   position: absolute;
   z-index: 1;
}

.markernew {
   float: left;
   width: 60px;
   height: 25px;
   background-color: #009E60;
   padding: 62px 0px;
   color: #fff;
   font-size: 24px;
   border: 1px solid #ddd;
   position: absolute;
   z-index: 1;
}

.markerold {
   float: left;
   width: 60px;
   background-color: #222;
   padding: 62px 0px;
   color: #fff;
   font-size: 24px;
   border: 1px solid #ddd;
   position: absolute;
   z-index: 1;
}

.subf {
   float: right;
   width: 190px;
   height: 82px;
   border: 1px solid #ddd;
   background-color: #fff;
   position: absolute;
   margin-top: 162px;
   margin-left: 180px;
}

.subforumsWrap {
   height: 62px;
   overflow: auto;
   padding: 8px 10px;
}

.subforums {
   display: block;
   height: auto;
}

.subforums a {
   display: block;
   margin-top: -9px;
   background-color: #009E60;
   padding: 3px 0px;
   font-size: 8px;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.subforums a:hover {
   background-color: #222;
   color: #fff;
}



HTML Template (Forum Row)
CODE
<div class="forumRow">
<div class="fwrapper">

<div class='marker'><!-- |img_new_post| --></div><div class='indexcontainer'><div class='newsection'><div class='new'><div class='sectionmain'><div class='section1'><div class='section1b'><div class='sectionname'><!-- |name| --></div><br></div><div class='lastpost'><span class="lasttopic"><!-- |last_topic| --></span><br> <!-- |last_poster| --> &nbsp;<strong>//</strong>&nbsp; <!-- |last_post| --></div></div></div><div class='desc'><!-- |description| --></div></div></div></div>

<div class='section2'><div class='section2a'><i class="fa fa-folder" aria-hidden="true"></i><strong><!-- |topics| --></strong>&nbsp;topics</div><div class='section2b'><i class="fa fa-comment" aria-hidden="true"></i><strong><!-- |replies| --></strong>&nbsp;replies</div></div>

</div>

<div class="subf"><div class='subforumsWrap'><!-- |subforums| --></div></div>

</div>


Macro Code (No New Posts)
CODE
<div class="markerold"><i class="fa fa-star-o" aria-hidden="true"></i></div>


Macro Code (New Posts)
CODE
<div class="markernew"><i class="fa fa-star" aria-hidden="true"></i></div>
PM
#
Bump! I'd really love to get this fixed soon if possible.
PM
#
Really hard to tell what the issue is here. Hmm. To be clear -- is the macro itself changing? It's simply not changing color as expected?

signature
email: admin@jcink.com :: blog: John C.
#
John

Yes, the macro itself is changing. In the first screenshot I provided, the macro to both "Potions Office" and "Potions Classroom" are how they are supposed to look when there are no new posts in the forum. When there are new posts, the dark background behind the star icon is supposed to change color. In that same screenshot, for the "Slytherin" forum, you can see the macro does not have the bordered box and the star icon is in a different location. It only does this on redirect forums and forums that have subforums contained within.

On the forums that do not have subforums or are not redirects, the macro works perfectly. It's just on those two types of forums that it doesn't.

This post has been edited by Buttons: Apr 10 2018, 11:31 AM
PM
#
Bump, still trying to figure this out.
PM
#
Bump again - any idea as to why this is happening?
PM
#
Still having issues with this, would love to get it resolved.
PM
#
I am not really sure what's going on here, unfortunately, sorry. I will investigate further when I can but what's causing the issue is not apparent which is why I have not been able to follow up with anything meaningful. I am not sure that this is a bug with the system. The macro is changing as it should but I don't understand why it looks differently.

signature
email: admin@jcink.com :: blog: John C.
#
Thanks, John. I know it's not an urgent or pressing issue but I appreciate you looking into it when you can.
PM
#
Might be a lot easier to figure out with a link to the forum (and skin selection) and test account. There's likely some obscure parent CSS rule that's affecting it.
PM
#
Dusty

Here's the link to the forum: Static Hogwarts

Username: SkinTest
Password: helpplease123

The skin that the issue is happening on is called "Mandy Testing" - let me know if you can't switch to it. Really appreciate your help!
PM
#
The structure of the elements is different between the redirect/parent forums and the regular ones that are working properly. The post forums contain a separate element to indicate having new posts or not, .markernew and .markerold. These elements have the border and height properties, but since the redirect forum does not use the new/no-new indicator, these styles are never applied.

Without adjusting too much, these replacements should work:

CODE
.marker {
   background-color: #222;
   width: 60px;
   height: 149px;
   border: 1px solid #ddd;
   font-size: 24px;
   display: flex;
   position: absolute;
   justify-content: center;
   align-items: center;
}
.markerold {
   background-color: #222;
}
.markernew {
   background-color: #009E60;
   padding: 105%;
}


Also, worth noting: absolute positioning and the float property are incompatible when applied to the same element, as absolute positioning takes the element out of the flow of the page completely, where float is actually a relative positioning property (even though it does look like it's been taken out of the flow)
PM
#
Thanks for taking a look at this, Dusty.

I've made the changes to the CSS, but while now all of the macros are the same size, I'm not getting the color change to the background. The little star colors itself in, but the background does not change color.

I believe we have decided to change the skin soon anyway as there are multiple other issues we're having with it, but I do appreciate your time and effort!
PM
#
Yeah, that particular structure makes it difficult to get a consistent style applied, since the parent box with the border has no class indication of whether it's for new posts or not, as that is indicated further down the DOM - plus, the 'new posts' macro introduces another element that forums without new posts do not have. It's doable, but it'd be whacky. Let me know if you decide to keep with that skin. Best guess would be to move the properties away from .marker and to the child anchor instead.

This post has been edited by Dusty: May 11 2018, 09:29 PM
PM
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll