2

I have a slight css issue and was hoping someone would be able to assist. I am in danger of being blocked asking any further questions so I'll try to be as clear and concise as possible :)

I would like to remove the background colour and set it to transparent for the ribbon on a announcement modal dialog box in SharePoint 2010. In particular the section highlighted in red on the image supplied below which I believe is the body #s4-ribbonrow but I could be mistaken?

SP 2010 - Announcement modal dialog box

I am already using body #s4-ribbonrow in my custom css to change the bg colour of my top toolbar on my main publishing site to a dark grey. I have always noticed this was not inherited on the modal view (its a dark blue) so tried to add .ms-dialog body #s4-ribbonrow to explicitly set this for all dialog boxes but had no luck. It simply will not remove the colour

I've run the Dom Explorer in IE11 and inspected the source of the area. There are mentions of both the ms-cui-topBar2 and ms-cui-ribbonTopBars but none specify the bg colour. The colour according to this is inherited from s4-ribbonrow which shows the dark blue colour here.

If I uncheck the bg colour from the actual class within the Dom Explorer it changes it to transparent which is what I would like to achieve. So I updated the custom css with the same changes reflective from the Dom Explorer but it wont recognise the change. I feel it is getting it from somewhere else also but not sure where to look

Any assistance is appreciated Thanks

2

Ok so after fiddling around and taking some of the suggestions from both the answers/comments I was able to get this to work using a combination of a few things. I have posted this as the answer to try and help others who would like to achieve the same thing.

So the CSS that was posted in both answers was the starting point and correct CSS to achieve what I was trying to do with the only change adding the .ms-dialog in front. As mentioned throughout the comments, I needed to look towards the v4.master to override the existing style. Trying to put the code just into a CEWP or adding the CSS into my Publishing Master Page CSS would not work.

I created a new custom CSS and forced that CSS to be read using the Alternate CSS URL in the Site Master Page settings. (For my publishing site I load my CSS through the master page not through here)

.ms-dialog BODY #s4-ribbonrow { background-color: transparent }

Site Master Page Settings

Modal dialog - after change

Hope this helps some others out there that have been/may be in the same situation. Thanks to those who pointed me in the right direction

Cheers

1

You mean like this?

enter image description here

This is the custom CSS applied.

<style type="text/css">
body #s4-ribbonrow {
    background-color: transparent;
}
</style>

If the CSS changes are not reflected in your form, then the custom CSS is not being loaded. Any further troubleshooting should then go towards ensuring proper referencing of the CSS.

To test that the CSS is working, edit the display form via the list settings ribbon, add a Content Editor Web Part and reference the custom CSS file in the content link. This is what I did for this demo.

  • Thanks for the response Teylyn. Funny thing is that the custom CSS does load for the rest of the changes I've made. For example I've made changes .ms-dlgTitle and that has worked fine. It's just this s4-ribbonrow element it will not allow me to change – Sanchez Sep 23 '14 at 1:28
  • post your exact CSS. You may need another pair of eyes to check for errors. – teylyn Sep 23 '14 at 1:41
  • I'd love to but unfortunately I cant. I am making these changes on a VM in test and cant get the css of that machine. I also tried your content editor fix and it didnt work for the modal box. It did however remove the colour from the top toolbar on my main publishing portal. Adding the .ms-dialog in front bypassed the removal for the publishing page, but unfortunately did not update the modal dialog box – Sanchez Sep 23 '14 at 1:59
  • If all else fails, take a picture of the CSS with your phone. Get creative. – teylyn Sep 23 '14 at 2:06
  • I hate to ask, but is it possible that the CSS assets are cached? Clear browser cache and try to view the modal again. Also, note that modals use the system master page by default, not the publishing master page. If your CSS customizations aren't loaded within the system master then they won't be used within the modal. – nsturdivant Sep 23 '14 at 4:29
0

you can try setting up the different theme and modifying it as per your requirement using colors you want,

1) Navigate to Site Actions->Site Settings->Look and Feel->Site Theme

2) Use the option in Site Theme to set up the colors:

enter image description here

Window looks like below screen: enter image description here

Also using css as below:

.ms-dlgTitle,#s4-ribbonrow {
background-color: black!important;}
  • Hi Hardik, I cant use this approach as I'm using a custom branded Publishing template. This does work on our Team Sites etc but it's not my requirement unfortunately. It does however point me in the direction to the v4.master Thanks though – Sanchez Sep 23 '14 at 5:01
  • what approach you are looking after here? – Hardik Kothari Sep 23 '14 at 5:05
  • I have custom master publishing pages for our portal that use specific css to brand the portal. I cannot use the above method for it. It overwrites the previous css. I am just looking for the class to update for the modal boxes and as its been mentioned, I believe its grabbing the value from the v4.master. – Sanchez Sep 23 '14 at 6:05
  • yes it uses the v4.master, i think there is no other alternative apart from overriding the default css else you will need to define the different master page for the form. – Hardik Kothari Sep 23 '14 at 6:08
  • Hi Hardik, so what exactly should I be doing based off your above comment? I tried as a test to just update the corev4.css to remove the colour and it has on the v4.master pages, but for the top ribbon as it shares the same css style (not modal). Do I need to enter a .ms-dialog body #s4-ribbonrow somewhere in the css to force this change? – Sanchez Sep 23 '14 at 23:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.