How to correctly override inaccessible HTML content with CSS?

Question

I am trying to make edits to a page where I do not have direct access to the HTML => Web Page when you look on this page on the right hand side you will see "Donate:, Find a Team, Participate: " I would like to re-order these to "Participate:, Find a Team, Donate: " however I can't figure out which container to move. I am using CSS to override the Convio (cms) html.

I know the overriding works because in my test page certain things I have been overriding like the colour, positioning, and visibility have all worked. So I'm thinking I'm targeting the wrong thing. I just can't figure out which one I should be.

EDIT now using flexbox some progress is being made

/* Relocating the Donate and Participate Buttons */

.side-bar {
  display: flex;
  flex-direction: column;
}

#donate_direct_link_container,
#donate_link_container,
#entry_page_reg_team_type_container,
#frStatus1,
#frStatus2,
#frStatus4 {
    flex: 1;
    text-align: center;
    color: white;

}


#donate_direct_link_container {
  flex: 0 0 auto;
  order: 3;
}

#donate_link_container {
  flex: 0 0 auto;
  order: 2;
}

#entry_page_reg_team_type_container{
  flex: 0 0 auto;
  order: 1;
}

#frStatus1 {
 flex: 0 0 auto
 order: 4;
}

#frStatus2 {
     flex: 0 0 auto
 order: 5;
}

#frStatus4 {
     flex: 0 0 auto
 order: 6;
}


</style>

There's got to be something I'm missing I just can't see what. Hoping someone can point out what it is or lead me into the right direction.

And just because I am curious, why would you be put in charge of changing the look of something (and have access to the CSS), but not the HTML? — Jeff.Clark, Apr 14 '16 at 15:38
somewhat yeah. When we go into mobile view it does adjust to fit the screen well enough. If that's what you meant by responsive lol. And because the way it's been set up, the Convio system which is managed by administration keeps it under lock and key, and because there are so many variations now they don't know which one specifically I need access to, I keep being lead to different people to ask them for the documents and those people are new so they have no idea themselves lol So I decided it would be easier if I just tried an override with CSS like I have for other pages. — SorryEh, Apr 14 '16 at 15:40
http://stackoverflow.com/questions/17455811/swap-div-position-with-css-only for responsive might work. — Jeff.Clark, Apr 14 '16 at 15:42
Responsive means that for any width, the website will display nicely. And oh man, that sucks Umeed :) Ask them to rip the band-aid off and let you fix it. Go all Boy-scout on them :) — Jeff.Clark, Apr 14 '16 at 15:42
yeah I would say somewhat, I don't think they took into consideration above 1080p, but so far testing on a bunch of mobile phones has shown to be working well. I'm creating a brand new responsive page wrapper that will eventually replace all these obsolete pages that will be 100% responsive...and all documents will be accessible lol. But for the time being they need certain adjustments made until that happens, and I'm the only web coordinator for ontario. Haha maybe after my 3 month probation is over lol — SorryEh, Apr 14 '16 at 15:44

score 1 · Accepted Answer · answered Apr 14 '16 at 15:38

1

If you need to reorder your content using only CSS, your best bet is to use flexbox's order property.

I've created a demo here on CodePen.

http://codepen.io/BenCodeZen/pen/QNmVLQ

The key is to find the wrapping element and add a display: flex; style to it and then utilize the order on the respective children element you need to change.

If you have any questions, please feel free to let me know!

answered Apr 14 '16 at 15:38

bencodezen

1,023
7
17

oh wow I had no idea about flexbox, this just might be what I'm looking for! thanks, i'll give it a shot and see where I get with it. – SorryEh Apr 14 '16 at 15:43
okay so...i'm kind of stuck haha. I've managed to get all the text to center, but I can't get the order to work. I'll post what I did. – SorryEh Apr 14 '16 at 16:14
1

BEN! thank you so much, I finally solved it and even managed to re-order the Participate list as well! this amazing lol i feel so awesome. Thank you so much. – SorryEh Apr 14 '16 at 18:52
You're welcome @umeed! I'm glad you were able to get it to work! – bencodezen Apr 18 '16 at 04:12

score 1 · Answer 2 · answered Apr 14 '16 at 15:39

It's possible. Use flexbox model.

.side-bar {
  display: flex;
  flex-direction: column;
}

#donate_direct_link_container {
  flex: 0 0 auto;
  order: 3;
}

#donate_link_container {
  flex: 0 0 auto;
  order: 2;
}

Define all side-bar blocks with your desired order.

How to correctly override inaccessible HTML content with CSS?

2 Answers2