Can't change CSS back


(Lars Zimmermann) #1

Hi,

sorry, this is ridiculous. But I can’t fix it…

I did changes in the top menu of our discourse and now the headlines of the meta categories is on top of the category images…

NOW

BEFORE

I want to go back to the before status… But I don’t know how and what I did.

If anyone can help I would appreciate it.


(Daniela) #2

Let me see if I understand correctly:

  1. you change the style in the category page to move the category’s name on the right of the image (img. BEFORE)
  2. then you made some other changes (adding the menu About, HOWTOs, Tags etc…??)
  3. when you save the new customization you lost the style you made for the category page (img. NOW)

If all I wrote above is correct, can you tell me if the stylesheet is the same for both the customizations or if you add 2 different stylesheets?

EDIT: I’m not be able to find any stylesheet relative to the category page in your site.
I assume that you add or delete a character broken the stylesheet. Did you see any error at the top of the stylesheet?

EDIT 2 : I see that you are still on beta 8. I don’t know if you already have the tab Theme under Customize. If you have it you can see the error at the top of the page. If that is not the case, you can’t see it (in this case share the CSS you add)


#3

Hi @Trash, thanks for your response - I’m also an admin of the OSCEdays community.[quote=“Trash, post:2, topic:63627”]
Let me see if I understand correctly:

you change the style in the category page to move the category’s name on the right of the image (img. BEFORE)
[/quote]

Actually I believe that the category’s name has always been on the right of the image - I don’t think this was custom CSS, (or certainly not a recent change if so).

I don’t know what changes @Lars_Zimmermann had made, as far as I can see the only addition to the default CSS (other than colors) is a section called ‘Top Bar’:

nav ul { 
    text-align: center;
}

nav ul li { 
    display: inline-block;
}

a:hover{
  color: #026699;
}


a {
    transition: color 150ms ease-out 0s;
    color: rgb(35, 137, 153);
}

nav#bar {
    width: 100%;
    height: 48px;
    background: #ffff;
    top: 20;
    z-index: 1;
}

nav#bar a.nav-link {
   
    text-decoration: none;
    text-align: center;
    font-family: Arial; 
    line-height: 28px;
    min-width: 90px;
    font-size: 15px;
    float: left;
    color: #000;
}

nav#bar a.nav-link.selected {
  line-height: 42px;
  border-top: 3px solid #fff;
  background-color: #0b0d0d;
  height: 25px;
}



.navbar-header {
    float: left;
}

#navigation .navbar-brand {
    text-decoration: none;
    color: #34495E;
    margin-top: 3px;
}

Potential solution

Looking in the Inspector, the category image appears to be embedded within the <h3> element, after the category name:

<h3 id="ember1069" class="ember-view">  
  <a href="/c/channels">
    <span class="category-name">ACTIVITIES</span>
    <div>  <img src="/uploads/default/original/2X/e/e11a3758ad4ef35441cb4564eeffe0575abcf487.png" class="category-logo">
    </div>
  </a>
</h3>

Result:

But when I swap the order of image and category name, it has the desired effect:

<h3 id="ember1069" class="ember-view">  
  <a href="/c/channels">
    <div>  <img src="/uploads/default/original/2X/e/e11a3758ad4ef35441cb4564eeffe0575abcf487.png" class="category-logo">
    </div>
    <span class="category-name">ACTIVITIES</span>
  </a>
</h3>

Result:


But I’m hardly an expert when it comes to HTML and Discourse - do you know how I should go about making this the default way that these Category headings are displayed?


(Daniela) #4

Hi @cameralibre, you can’t change the position of the Html elements but you can play with CSS instead.
Try this workaround :

/*Move the category image at the top*/
.category-logo {
    margin-top: -15px;
}
/*And this is because the logos of categories have different width*/
/*Activities category*/
.category-list tbody .category h3 a[href="/c/channels"] .category-name {
    margin-left: 95px;
}
/*Meta category*/
.category-list tbody .category h3 a[href="/c/resources"] .category-name {
    margin-left: 56px;
}
/*Local Events category*/
.category-list tbody .category h3 a[href="/c/local-teams"] .category-name {
    margin-left: 89px;
}
/*Global Coordination category*/
.category-list tbody .category h3 a[href="/c/community-organization-global"] .category-name {
    margin-left: 90px;
}

Let me know if it works for you.


#5

This works great, thank you!
I just added it to the Desktop CSS, as it isn’t as necessary on mobile (where the category descriptions aren’t shown on the front page).


(Lars Zimmermann) #6

Thanks! You are fantastic @Trash !