Can someone maybe help me with a few lines of css code?
I would like to my search section on my page:
http://www.virtual-forms.com/docs/
To look something like this:
https://docs.wedevs.com/
I'm new to CSS and Wordpress
Thanks, Davor 🤗
EDIT:
My latest try was with this:
/*Header search weDocs*/
.wedocs input[type="submit"],
.wedocs input[type="search"]
{
background-color: #fff !important;
color: #000;
width: 50%;
}
But no luck.
you should get on with applying correct CSS by inspecting the elements in your web browser (right-click element on site > Inspect) to find their correct classes. inspecting linked site virtual-forms.com shows that the whole search form has a parent form element with class="search-form wedocs-search-form", with child divs with classes "wedocs-search-input" for input, "wedocs-search-in" for dropdown and "search-submit" for submit-button.
I would put display: flex; on the parent element:
.wedocs-search-form {
display: flex;
}
use classes to style each individual element there
.wedocs-search-input { }
.wedocs-search-in { }
.search-submit { }
Using those classes should get you closer to getting the correct style to those elements. read up on the flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I would use flex-grow on input to make it bigger for example. Hope this gets you along.
Related
I am trying to remove grid cell focus styling from each Grid instance that uses a specific CSS class.
The CSS
.v-grid-cell-focused:before {
display: none !important;
}
works great but applies the styling across all Grid instances in my application.
I have tried making it apply specifically to a CSS class by:
.mygrid.v-grid-cell-focused:before {
display: none !important;
}
or
.v-grid-cell-focused.mygrid:before {
display: none !important;
}
or
.mygrid > .v-grid-cell-focused:before {
display: none !important;
}
but result in no changes from the default behaviour.
I have successfully used the following CSS
.v-grid-cell.anotherGrid {
background-color: #07a9ca;
color: #000;
}
where the only Grids that adopted the the above styling was the ones that I assigned to the style name anotherGrid to. This suggests to me that there might be a complexity regarding CSS selectors, in my case :before, coupled with custom CSS classes that is causing my implementation not to work.
How do I reference Vaadin component CSS and apply it only to specific CSS classes that I specify?
I had the same requirement and for me, the following style worked:
.mygrid .v-grid-cell-focused:before {
display: none !important;
}
Notice the space between .mygrid and .v-grid-cell-focused:before which means to select not only the direct children (as you did with >).
I currently am styling my social sharing buttons using groupings (all Facebook buttons have a set style, all Twitter buttons do, etc.). Currently, I achieve this using a massive grouping of YUI's for each button type - this makes creating new sharing buttons extremely tedious, as I have to inspect each button to find its ID. Below is the code that stylizes my Facebook share buttons. The format is identical for my other button types, just with different YUIs - woefully lengthy. However, my code is functional as is:
#block-yui_3_17_2_1_1486492076694_136568, #block-yui_3_17_2_1_1486492076694_229456, #block-yui_3_17_2_1_1486492076694_301518, #block-yui_3_17_2_1_1486492076694_346464, #block-yui_3_17_2_1_1486492076694_390386, #block-yui_3_17_2_1_1486497764071_38998, #block-yui_3_17_2_1_1486497764071_84939, #block-yui_3_17_2_1_1486497764071_127888, #block-yui_3_17_2_1_1486497764071_167750, #block-yui_3_17_2_1_1486497764071_210706, #block-yui_3_17_2_1_1486762828716_16671, #block-yui_3_17_2_1_1487613145787_165402, #block-yui_3_17_2_1_1488578082993_168899, #block-yui_3_17_2_1_1489175439402_256947, #block-yui_3_17_2_1_1489873739917_158023, #block-yui_3_17_2_1_1490053051323_201623, #block-yui_3_17_2_1_1490837162453_152647, #block-yui_3_17_2_1_1491429139219_249912, #block-yui_3_17_2_1_1491948942477_176351 {
display: inline-block;
padding-bottom: 0;
padding-top: 0;
}
Ideally, I'd like to target each button type using their respective classes to REALLY consolidate the amount of code I have written (and make future additions much more efficient). I've tried everything I could think of, but nothing seems to work.
I'm currently working on the Squarespace platform.
Your problem might be because of Squarespace's default styles. When targeting elements, CSS prefers the more precise selector:
.social-icon {
background-color: red;
/* Less preferred */
}
html body div.social-area img.social-icon {
background-color: blue;
/* More preferred */
}
You can override this by using !important:
.social-icon {
background-color: red !important;
/* More preferred */
}
html body div.social-area img.social-icon {
background-color: blue;
/* Less preferred */
}
so when you style your social icons, use !important to override Squarespace's default styles.
.social-icon {
display: inline-block !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
Hope this helps!
I've been trying to hide everything apart from the main content on the following Facebook post
I've been injecting the following css without luck - can someone please help?
html body * {
display:none;
}
#contentArea {
display:block;
}
Below is a screenshot of what I'm after.
With body * you are hiding every child.
With #contentArea you are showing this block, but still - body * persist for child elements AND parent elements.
You have to specify much more rules to hide everything else.
As mentioned before, you cannot display an element which has a parent that was hidden. Anyway, Facebook's layout is simpler than I thought, all you have to do is hide two elements: the header and sidebar. This of course assumes that a user is not logged in.
Inject this CSS
#pagelet_bluebar, #rightCol {
visibility: hidden;
}
Result:
Result (user logged in):
To hide the chat sidebar, you can add #pagelet_sidebar to the CSS.
#pagelet_bluebar, #rightCol, #pagelet_sidebar {
visibility: hidden;
}
To conclude: Hide the main parts instead of everything, or use jQuery to target all except your element as suggested by #MaVRoSCy.
Thanks everyone - the following seems to be the combination of everyone's answers:
#leftCol, #pagelet_bluebar, #rightCol, #pagelet_bluebar {
visibility: hidden !important;
display: none !important;
}
html ._5vb_.hasLeftCol #contentCol {
border-left: initial !important;
margin-left: initial !important;
padding-left: initial !important;
padding-top: initial !important;
}
._5vb_, ._5vb_ #contentCol {
background: none !important;
}
For all the images by default the below style class is being set.
.figure {
display: inline-block;
vertical-align: top;
position: relative;
max-width: 100%;
}
I am trying to change display: inline-block to display:inherit only on a particular page. I added the image via visual composer in WP,and tried adding a new class for the image div by adding the style needed, but still the display:inline-block remained the same.Any solutions will be appreciated.Thanks.
please add inline css and check its working or not?
If its working then add new class and add that class end of the css and try it will work
Like add inline-img this is the new class then add following css to end of your css file
.figure.inline-img{
display:inherit;
}
If you've added a custom style to the figure (you mentioned a .pax class), then you simply need to specify the following in the CSS:
.figure.pax{
display:inherit;
}
If that doesnt work, you can either add specificity to the selector (my preference) or add !important as follows:
.figure.pax{
display:inherit !important;
}
(Alternatively, if you'd like the image to be display:block which is what it looks like you'd like, use display:block instead of display:inherit)
I have 30 buttons of different sizes and I want to set the width of all at once through CSS. But I haven't been able to get it to work right.
[insert example of failed CSS code here]
But it doesn't work. For example, the following button doesn't follow the above rule:
[insert minimal, complete HTML example here that illustrates the issue]
If you need to do this explicitly, you can simply add the !important attribute, although this will guarantee that regardless of location or source, the width property will be overridden, so be sure that you definitely want to apply that style.
button {
width: XXXpx !important;
}
EDIT
To make the above style only apply to one HTML page, as per your request, you can change the HTML for that page slightly, giving an id to your <body> tag, and then targeting buttons only when they appear below that id.
HTML
<body id="page_title">
CSS
#page_title button {
width: XXXpx !important;
}
You can create a button class in your css
.button
{
width: ____px;
}
and then in your .aspx add cssClass="button" to your ASP buttons (I assume they're asp.net controls?)
For input element
INPUT[type="submit"] {
width: XXXpx;
}
For button
BUTTON {
width: XXXpx;
}
Assuming your buttons have something unique in common (ie. they're all have the class name of "buttons"), you can just use a CSS selector to set their width property. ie.
.buttons {
width:100px;
}
There are a number of different selectors you can use to target them, and keep in mind you can have multiple classnames on each html element by putting a space between them. ie. <div class='nav button'></div> will respond to both the .nav and .button definitions.