I have a requirement to change the standard tab styles, i.e.
to something like this:
I can't find anything on the web which deals with this – obviously you can change the tab icons for when you click on the tab but that's about it. I would need to add an icon, change the background color, font, etc.
The client is sure he's seen this kind of customization been done before. Is there any way?
Disclaimer, I did not test this. And this is totally against the recommendations of salesforce as HTML on page can change due to many factors.
You can try adding your CSS file as a document file and then inserting it as a logo for the app.
So your issue is that you want your apex:repeat elements to be rendered adjacent to each other instead of rendering the second repeat below the first one.
Firstly, if it is possible to use a wrapper class and fetch all your data so that you can use one apex:repeat to render it, then do this.
If not, you can use CSS to position two <div> elements next to each other.
So you can try something like this:
<apex:outputPanel layout="block">
<apex:outputPanel layout="block">
Your first apex:repeat here
</apex:outputPanel>
<apex:outputPanel layout="block">
Your second apex:repeat here
</apex:outputPanel>
</apex:outputPanel>
Best Answer
You cannot change the styles of the standard tabs. You can however set tab-styles via the 'Tab' setup for a custom object or VF tab.
I've done the JS manipulation with using non-standard controllers and tabs like this before, but it was less than ideal and not very stable.