Jump to content

Archived

This topic is now archived and is closed to further replies.

rijans

Mobile menu background color and font color

Recommended Posts

rijans    5
rijans

While trying to change BG color and font color of the dropdown menu of mobile , I identified the specific section and css codes like this >> http://screencast.com/t/HYGvSGgkbMr

 

So I used the following code  >>

#body .pl-mobile-menu {
   background-color: #252525;
   color: #FFFFFF;
}

which is not working!

 

Then searching the forum , I found the following code from here >>http://forum.pagelines.com/topic/22289-font-color-for-mobile-menu/

#site .navbar .dropdown-menu a {
padding: 6px 15px;
background: none repeat scroll 0% 0% #2525255;
color: rgb(255, 255, 255);
}

This isn't working too!

I'm referring to background and font color


.....Being a code noob, I want highest control as much as possible! What a mismatch! ......

.......Feeling Rockstar with DMS! .......

....I believe there's nothing like DMS....

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

please link us to your site so we can look at this for you ourselves. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
rijans    5
rijans

techgainer.com


.....Being a code noob, I want highest control as much as possible! What a mismatch! ......

.......Feeling Rockstar with DMS! .......

....I believe there's nothing like DMS....

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

thank you. 

 

Ok so you you have the correct CSS in the first place - the second lot of CSS you added is taken from a forum for a completley different PageLines product (the PageLines Framework) http://screencast.com/t/yZMnrLySMEh

 

The second set of CSS has an error in the CSS code itself. Any errors in your code will likely affect ALL the custom code you add to your site. add an error and it is likely any code you add after this will not take effect. Please please use the validator tool i linked previously to check your code before posting to the forum. The validator will tell you line by line where the problems are. 

 

The selectors are incorrect but the validator will not tell you that - Firebug will tell you the selectors. 

 

You can find the validator here http://jigsaw.w3.org/css-validator/#validate_by_input

 

#site .navbar .dropdown-menu a {
padding: 6px 15px;
background: none repeat scroll 0% 0% #2525255;
color: rgb(255, 255, 255);
}

 

The red text here is incorrect. 

 

The CSS you pasted in the forum before that - works for me 

#body .pl-mobile-menu {
   background-color: #252525;
   color: #FFFFFF;
}

please see here. http://screencast.com/t/By7FLhJM

 

Step 1 - run CSS through the validator 

rectify the errors and then re add the CSS 

  • Like 1

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
rijans    5
rijans

Hey! IT working in console for me too! 

But not working when in custom css!

Here's all of my codes from my custom css >>

#body .pl-mobile-menu {
   background-color: #252525;
   color: #FFFFFF;
}

//not working
//.SideSocialLikeButtons {
//  border-top:solid;
//border-color:#cbd2d6;
//}

//rmv spc
.SocialFont .mediabox-wrap {min-height: 0px;}
.SocialFont .the-media {margin-top: 0px}

//disable the view of taggs
.tags {display: none;}


//adding Border
.abox .media.author-info {
border-top:solid;
border-color:#cbd2d6;
border-bottom:solid;
border-color:#cbd2d6;
}

//Removes space from headerlogo bottom(the logo made with mediabox html)
//from my forum post
.the-media-html p { margin: 0; }

//Used to Disable "visit author's website" beneath author box
.author-details {display:none}

//Used to disable author thumbnail link author box. Referral: http://goo.gl/vAmR1r and http://goo.gl/iMmGB
  .thumbnail {pointer-events: none;cursor: default;text-decoration:none; width: 95px; height:95px;}

//Used to control the color of the label "AUTHOR" in Author box
.author-note {font-size: 13px; color: #404040;}

//image frame type control in post excerpts  ....regards: http://goo.gl/Q59CNS and http://docs.pagelines.com/tutorials/html-css-utilities
//.img-polaroid .attachment-thumbnail.wp-post-image, .entry_content img { border-radius: 50%;
// -webkit-border-radius: 50%; -moz-border-radius: 50%;}
//learn css to make it squire! polaroid!

//change navbar color
//code from http://forum.pagelines.com/topic/32904-navbar-color/?hl=navbar
//my thread 
#site .navbar {background-color: #252525; 
 //color: #ffffff;
//background-image: none;
//box-shadow: none;
//border-top: none;}
//ff6400

//changing header color http://forum.pagelines.com/topic/33192-header-color-changing-code-not-working/#entry196850    violate:#5e2750
#header .pl-area {background-color: #252525;}

//Controling metabar font....refer: http://forum.pagelines.com/topic/33170-metabar-font-size/
.post-meta .metabar em { font-size: 110%; }

//Global Navbar font control with custom class
.SectionOfGNavBar {font-size: 120%;}

//gnav bar font color white http://forum.pagelines.com/topic/33202-cannot-change-navbar-font-color/#entry196882
.navbar.pl-color-base .navline > li > a {  color: white;}

//Change Footer color and font control
.footerbgClr {background-color: #252525; color: white;}
.footer-simp-nav {font-size: 105%;}

Do you think anything here conflicting?


.....Being a code noob, I want highest control as much as possible! What a mismatch! ......

.......Feeling Rockstar with DMS! .......

....I believe there's nothing like DMS....

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

 

 

The second set of CSS has an error in the CSS code itself. Any errors in your code will likely affect ALL the custom code you add to your site. add an error and it is likely any code you add after this will not take effect. Please please use the validator tool i linked previously to check your code before posting to the forum. The validator will tell you line by line where the problems are. 

 

The selectors are incorrect but the validator will not tell you that - Firebug will tell you the selectors. 

 

You can find the validator here http://jigsaw.w3.org/css-validator/#validate_by_input

 

 

Step 1 - run CSS through the validator 

rectify the errors and then re add the CSS 

 

 

Also 

 

 

comment out your css with  /* */ 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

i try and type this with the utmost respect to you and your work - All your recent posts have been related to CSS syntax issues,. I suggest taking a course in CSS as nearly everyone else has had to, using the validator and online tools etc. 

 

we cannot help you fix your purely CSS related issues but we can support you using DMS. CSS was not 'created' by us and therefore we cannot support just purely that. 

 

The are many many websites and forums with resources relating to CSS support. 

 

Also please use the pastebin feature when pasting rafts of Code to the forum. 

 

EDIT = you can paste anything you like here but we may not be able to support it is what i meant 

  • Like 1

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
rijans    5
rijans

Okay!


.....Being a code noob, I want highest control as much as possible! What a mismatch! ......

.......Feeling Rockstar with DMS! .......

....I believe there's nothing like DMS....

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

thanks 

 

all that aside - have you got this working? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
rijans    5
rijans

I'll keep you posted! Thanks!


.....Being a code noob, I want highest control as much as possible! What a mismatch! ......

.......Feeling Rockstar with DMS! .......

....I believe there's nothing like DMS....

Share this post


Link to post
Share on other sites
rijans    5
rijans

I'v tried it on test site http://sb.techgainer.com/ where everything is fresh and no single customization in dms!

It only working in console >> http://screencast.com/t/gBcEHWOBl3r

BUt

The code 

#body .pl-mobile-menu {background-color : #252525;
color : #FFFFFF;}

http://screencast.com/t/Lxz2evs19

Isn't working there too! and nor the code 

#body .pl-mobile-menu {

   background: #252525;
   color: #FFFFFF;
}

.....Being a code noob, I want highest control as much as possible! What a mismatch! ......

.......Feeling Rockstar with DMS! .......

....I believe there's nothing like DMS....

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

ok - if you create me an admin logon for your site and send the credentials to hello at pagelines dot com i will take a look for you. can you make sure you put the URl for this topic in the email so if anyone else picks up the email it will tie up with the topic :) 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
rijans    5
rijans

Martin Davies 

 

Done with your request. Check it out plz


.....Being a code noob, I want highest control as much as possible! What a mismatch! ......

.......Feeling Rockstar with DMS! .......

....I believe there's nothing like DMS....

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, I've looked at your code. The Hex value for #252525 is black, so its not really different from the default, what color are you trying to make the nav?

 

Try something like

 

body .pl-mobile-menu {
   background: #4312e3 !important;
   color: #FFFFFF !important;
}

 

This is bright blue and you should see the code working correctly. If you're testing in another browser, you might need to flush the LESS first in settings > reset > flush less before viewing in the other browser and seeing the changes.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
rijans    5
rijans

James B Not working it too! I flushed several times


.....Being a code noob, I want highest control as much as possible! What a mismatch! ......

.......Feeling Rockstar with DMS! .......

....I believe there's nothing like DMS....

Share this post


Link to post
Share on other sites
greenfly    230
greenfly
Can you paste in the exact code you are inputting please?

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
rijans    5
rijans

#body .pl-mobile-menu {background-color : #252525;
color : #FFFFFF;}


.....Being a code noob, I want highest control as much as possible! What a mismatch! ......

.......Feeling Rockstar with DMS! .......

....I believe there's nothing like DMS....

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, something in your custom code above must be incorrect then and its stopping the code below from being read. I've just tested that code provided on my test site in the custom css panel and its working.

 

Try copy/paste all your custom css into a blank text doc so you have a coy saved. Then delete it from the site and insert the mobile menu code only and test. Once you've done that you can paste back your other code in sections to find the part where its breaking.

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
rijans    5
rijans

James B I'v tried the code on a fresh site too where no customizations! not worked!

 

BTW I no more want to mess with you guys about this! Thanks for your times! :)


.....Being a code noob, I want highest control as much as possible! What a mismatch! ......

.......Feeling Rockstar with DMS! .......

....I believe there's nothing like DMS....

Share this post


Link to post
Share on other sites
batman    389
batman

Hi rijans

I see your code, the James B code have "!important", you can make a probe with

 

#body .pl-mobile-menu {background-color : #252525 !important;
color : #FFFFFF !important;}

or 

body .pl-mobile-menu {background-color : #252525 !important;
color : #FFFFFF !important;}


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites

  • Similar Content

    • MissT
      By MissT+
      Is there a way to get the mobile menu to close when you click a menu item that is for an anchor link with the same page?
      Currently on mobiles and ipad the black mobile menu still covers a third or the screen after you have clicked a menu item (that is linking to an anchor link) and it has scrolled to the link / section within the current page. You have to physically click within the page / away from the mobile menu to get the menu and it's black background to disappear.
      Many thanks in advance.
    • tkpagelines
      By tkpagelines+
      Hi there ,
      i would like to change the color of menu items on hover and the current menu item. Both should have the same color, but not the color given of the theme scheme.
      Any suggestions ? Maybe a css snippet ?
       
      Thanks
    • nandorj78
      By nandorj78+
      I'd like to request a section (or that this could be enabled on the background settings of the existing sections) in which we could set a image to stay fixed, just as we can see in the link below:
      http://www.bootply.com/render/100702 (you can see 2 different background images and everything scrolls on top of it.)
      Is it possible to be done without having to code it via CSS every time?
    • floydwebb
      By floydwebb+
      I can't find the mobile menu feature. Please let me know how to find it. 
    • mistrmint
      By mistrmint+
      Site : http://fireworxmedia.yourdemosite.co.za/
      I need to change the second menu items on hover to different colors.
      i.e factual needs to be blue on hover, fiction red on hover, etc. etc.
      then on the sub menu of factual, all need to hover blue with the main menu factual item staying as blue,
      and the sub menu of fiction needs to hover red with fiction item staying as red.
      etc. etc.
       
      For the life of me I cannot figure it out.
×