0

User mentioned an inconsistency layout problem, for our team site and community site. As the Page tab will not have an upper blue boarder same as other tabs, such as event, calendar, items. So is there a way to add upper blue boarders to the Page tab. ? The below image show how these tabs look differently some with upper blue border and the other without? enter image description here

::EDIT::

I have added the following to my custom CSS :-

 .ms-cui-tt,  ms-cui-tt-s
      {
   border-top-color: #008CD2 !important;
}

but it did not work and still the Page tab does not have any boarder . Although using the IE developer tools, it have detected the following :- enter image description here

I added the following script to my cusotm .js :-

$(document).ready(function(){
$(".ms-acal-apanel-title span").text('Select Calendar/s'); 
$("#Ribbon\\.WebPartPage-title a").css('border-color', '#FF0000');
$("#Ribbon\\.WebPartPage-title a").css('border-top', '4px solid #FF0000');  
});

But it did not apply a boarder, baring in mind that the script fired correctly , as the first statement has changed the title of the calender to be "Select Calender/s" ? but the next two statements did not work ?

Edit2

I have added the following script :-

$(document).ready(function(){
$(".ms-acal-apanel-title span").text('Select Calendar/s'); 
$("#Ribbon\\.WebPartPage-title a").css('border-color', '#FF0000 !important');
$("#Ribbon\\.WebPartPage-title a").css('border-top', '4px solid #FF0000 !important'); 
$("#Ribbon.WebPartPage-title a").css('border-color', '#FF0000 !important');
$("#Ribbon.WebPartPage-title a").css('border-top', '4px solid #FF0000 !important'); 
});

But no boarder was added, baring in mind that the script is working well since the first statement has changed the title to "Select Calendar/s". any advice on what is preventing the boarder from being displayed ?

Edit3

the chrome consul is showing the following error :"GET http://gvstg01:40708/sites/Intranet/Style%20Library/JS/jquery-1.10.2.min.map 404 (NOT FOUND) " i do not know why it is referencing jquery-1.10.2.min.map instead of jquery-1.10.2.min.js ? i have referenced jQuery inside my master page using the following code:-

<script  type="text/javascript" src="/sites/Intranet/Style Library/JS/jquery-1.10.2.min.js" ></script>
  • 1
    Is not possible through CSS because I would have post the CSS solution my proof concept had worked out. The JQuery approach worked for me. Maybe you have to add !important at the end of #FF0000 – Alvmad Sep 26 '13 at 5:53
  • can you check my Edit2. – john Gu Sep 26 '13 at 9:04
  • Yes. I don't know why you got that error. Check this link stackoverflow.com/questions/7474354/… the src should be /Style Library/js... instead of /sites/intranet.. – Alvmad Sep 26 '13 at 14:00
  • i remove the chnage the src, but now i am getting the following error on chrome consule Failed to load resource: the server responded with a status of 404 (OK) gvstg01:40708/Style%20Library/JS/jquery-1.10.2.min.js. and also and error on the jsFile " Uncaught ReferenceError: $ is not defined " – john Gu Sep 26 '13 at 14:40
2

Yes you can.

In your custom jsfile put the following code inside document.ready:

$("#Ribbon\\.WebPartPage-title a").css('border-color', '#FF0000');
$("#Ribbon\\.WebPartPage-title a").css('border-top', '4px solid #FF0000');

Replace #FF0000 by your colour

Edit 4 This is my Chrome console after putting this code and pressing enter

enter image description here

After some seconds I add the following code

enter image description here

And finnaly write the code before press enter

enter image description here

And After pressing enter

enter image description here

I have no idea why that doesn't work for you

  • thanks for the reply, but is there a way to modify this using a cusotm CSS instead of using javascript ? – john Gu Sep 25 '13 at 20:26
  • can you check my edit please?. – john Gu Sep 25 '13 at 20:52
  • did you have the chance to check my Edit2 ? – john Gu Sep 26 '13 at 13:38
  • 1
    Yes. It is odd. Have you tried to use the chrome console adding var jq = document.createElement('script'); jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(jq); // ... give time for script to load, then type. jQuery.noConflict(); and then apply the code? – Alvmad Sep 26 '13 at 13:45
  • can you check my edit3 – john Gu Sep 26 '13 at 13:54

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.