Jump to content

Change the style of the drop-down menu.


Il Domandatore
 Share

Recommended Posts

I used a WordPress theme and I know a little about CSS and HTML basics. In fact I managed to make 2 changes myself and I will make some. If you tell me how to do, it is possible for me to understand how to change the settings at will.

Unfortunately I get confused looking at an entire site.

https://oldfreegame.com

Link to comment
Share on other sites

You say it's too much to focus on readability 0 on the Hemingway app?

Why if I modify with the developer tool the changes work and with the custom CSS in the theme do not?

 

.switcher a {
    text-decoration: none;
    display: block;
    font-size: 24px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

 

Link to comment
Share on other sites

I am using the theme Oceanwp and I use a mild effect to pop up and vanish submenu. I see the submenu putting the Block, but to see the information on the instrument developer, I have to click with the option to inspect the items. it is from that moment that display returns to None.

Link to comment
Share on other sites

select the element, then go to dev tools and within the styles pane you should see :hov, that shows the pseudo types for hover: :focus etc, select each of those and see what happens to the styling for that element, it will probably show block now! for focus selection.

Edited by dsonesuk
Link to comment
Share on other sites

I changed from the Oceanwp theme, custom CSS, the display to block, but it behaves exactly the same as with the Chrome developer tool. Display: none;

I tried to change something else with the Chrome Developer Tool and as soon as I hover over it, the changes are removed. Strange...

Edited by Il Domandatore
Link to comment
Share on other sites

You say I have the same settings with hover and this makes you forget the changes? Did I get it right?

 

I tried to change the height;

From so
{
     position: relative;
     top: 0px;
     float: right;
     width: 44px;
     height: 852px;
     border-radius: 10px;
     background-color: rgb (65, 21, 98);
     background-clip: padding-box;
}

to so

{
     position: relative;
     top: 0px;
     float: right;
     width: 44px;
     height: 33%;
     border-radius: 10px;
     background-color: rgb (65, 21, 98);
     background-clip: padding-box;
}

Edited by Il Domandatore
Link to comment
Share on other sites

No,  for example, by default it may have class of "state-default" then when hovered the class changes to "state-hover" using javascript. If these classes are not included in your css code, it may not be enough to override these classes.

Link to comment
Share on other sites

Yes!... but! Its obvious seeing that you have classes as it describes THEY have been forced to be unclickable and use hover instead, therefore if you do the reverse and add the actual url and not! '#' and remove class it will revert to being clickable. Use what god gave you!

Link to comment
Share on other sites

to so

{
     position: relative;
     top: 0px;
     float: right;
     width: 44px;
     height: 33%;
     border-radius: 10px;
     background-color: rgb (65, 21, 98);
     background-clip: padding-box;
}

 

what is selector?

If it is 'element.style, then no! it won't work! its inline css added to the actual element, if you edit this then yes! it will work, because you are editing inline css IT has highest precedence over any other css, inline or external.

Even if you used its selector of .nicescroll-cursors {}, the inline styling will still override it, Unless each styling property you needed to amend had !important placed next to it example: height: 33% Important; and !important was not included with the inline  property you needed to change.

Link to comment
Share on other sites

<div id="ascrail2000" class="nicescroll-rails nicescroll-rails-vr" style="width: 44px; z-index: auto; cursor: default; position: fixed; top: 0px; height: 100%; right: 0px; opacity: 1; display: block; background: rgb(192, 108, 254);"><div class="nicescroll-cursors" style="position: relative; top: 0px; float: right; width: 44px; height: 1024px; border-radius: 10px; background-color: rgb(255, 255, 255); background-clip: padding-box;"></div></div>
element.style {
    width: 44px;
    z-index: auto;
    cursor: default;
    position: fixed;
    top: 0px;
    height: 100%;
    right: 0px;
    opacity: 1;
    display: block;
    background: rgb(192, 108, 254);
}

Puoi farmi un esempio pratico sul codice precedente con importanti? Avevo provato a mettere questa opzione ma non ha funzionato. Ho fatto qualcosa di sbagliato.

Edited by Il Domandatore
Link to comment
Share on other sites

I don't know if you are actually using 'element.style' as a selector, but if you are DON'T, that just shows the inline styling for current selected element. You need to target the 'id' if available at very least. '#ascrail2000' or if not available the classes

'.nicescroll-rails.nicescroll-rails-vr' or to give more precedence

'#ascrail2000.nicescroll-rails.nicescroll-rails-vr'

Only target the css property you wish to change, the rest will just be duplication of the original.

#ascrail2000 {

background: yellow !important;

}

Edited by dsonesuk
Link to comment
Share on other sites

I found that it also adds a sidebar to me at the bottom. With the chrome developer tool I found and deleted it. is a style element, how do I delete it and how do I know where exactly it is?

 

I tried to follow your lead with important, but I don't understand what I'm doing wrong.

# ascrail2000 .nicescroll-rails nicescroll-rails-vr {
     height: 33% !important;
}

https://i.postimg.cc/44BfgLqp/Schermata-2021-02-17-a-18-29-12.png

Edited by Il Domandatore
Link to comment
Share on other sites

1 hour ago, Il Domandatore said:

I found that it also adds a sidebar to me at the bottom. With the chrome developer tool I found and deleted it. is a style element, how do I delete it and how do I know where exactly it is?

I don't know? not a mind reader, I don't know what you are referring too.

id value should butt against the '#' as in  

#ascrail2000 

which is the same with class value but with '.'

.nicescroll-rails

ANY spacing between a selector refers to a child element of previous, BUT! all the id and class references are list on the same element so they don't refer to any child elements at all! So it should be #ascrail2000.nicescroll-rails.nicescroll-rails-vr (no spaces mean it refers to single element id and classnames used on that element)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...