I have a repeat custom control with a pager. In the designer the text ("previous 1|2|3|4|5 Next") is aligned on right; unfortunately when displayed on server this text is left aligned. I've tried to add the text-align: right to the font parameter of the style, without any success. The server is also unable to extend a xp:div to the CSS specified size (width: 800px).
I'm in 8.5.3 release. Does anyone had this kind of problem?
Will you please clarify the question. And paste the pager source then will have better idea.
If you have selected the pager control and given the alignment property as Right, then you source should show as follows.
<xp:pager partialRefresh="true" layout="Previous Group Next" xp:key="headerPager" id="pager1" panelPosition="right"></xp:pager>
You can add style="float:right" in pager control although it is not best practice to add CSS styles to XPages or Custom Controls.
Find out which CSS class the pager element is associated with (with developer tools in browser). It should be class xspPagerRight. Look also for the source where float: right is overwritten with left. If you can't change it there then you have to "overwrite" it. Create a Style Sheets file under Resources and put in
.xspPagerRight {
float: right;
}
Then add it as a resource to your XPages or theme.
Note about the question : why the title is different of what it was when I created it ?
Related
I want to resize input date boxes of TelerikDateRangePicker component in Blazor in order to fit it better in my page. It looks to be a bit long and I want to resize it. This is the original size:
I tried adding
<style>
.k-floating-label-container {
width: 140px !important;
}
</style>
to the header of the page when running which made it as follows:
However, when I do the same in my CSS file and then run the application it goes back to the default. Any idea on this?
I have contacted them and they said: "To resize the inner inputs for the DateRangePicker you can use some custom CSS styles. To make cascading easier you can use the Class parameter that is available for the TelerikDateRangePicker. To better illustrate the concept, I have created a small sample that you can see from this REPL link, as well as quickly run it to see the rendered result."
I am trying to duplicate a menu section but want the background and on hover colours to be the opposite. The CSS stylesheet/website was not created by me and I am not used to coding.
This page is VERY MUCH in progress https://www.wildedge.co.uk/archery-academy-session/
but I would like the menu to change colour for the 2 lines, eg
.squareboxarchery{background-color:#546734;}
.squareboxarchery:hover{background-color:#425227;}
.squarearcherytitle{color:#ffffff;}
and
.squarebox{background-color:#425227;}
.squarebox:hover{background-color:#546734;}
.squaretitle{color:#ffffff;}
I cant work out how to make it a separate entity...
Any help would be much appreciated!
Looking at the dom, I think that :
the second div.fixed_site layer_wrapper should be moved, now its in the first fixed_site layer_wrapper; its logic that two same structures have to be on the same level.
Once that done, you can easily separate your css by :
/* applies to the first line */
div.fixed_site layer_wrapper squarebox {}
and
/* applies to the second line */
div.fixed_site layer_wrapper + div.fixed_site layer_wrapper squarebox {}
you are using wordpress theme. and you need to login your CMS and do some selections and save the page. if its not working then you need to add extra css for the page with css property !important to overwrite background colors and text colors, hover colors etc.
which will be look like.
.squareboxarchery{background-color:#425227;!important}
.squareboxarchery:hover{background-color:#546734;!important}
.squarearcherytitle{color:#ffffff;!important}
and
.squarebox{background-color:#546734;!important}
.squarebox:hover{background-color:#425227;!important}
.squaretitle{color:#ffffff;!important}
use which one you want from above 2 sets.
Or simply add the the lines into style.css which will work for you.
If you are using a CMS -Content Manager System normally you have to overwrite by using !important after your style.
But there is also another way to avoid using it !important. Install FileZilla, go to the folder where it is the main.css of your website and change manually the lines of code. And then upload again this file in your website. But be careful, if you did not use to do this, duplicate these files twice for security. If you make a mistake you have always the original on your computer.
I have made a complete Bootstrap grid system. I am now uploading my code to a CMS system, and can see there is some CSS from the backend, there is messing up my grid.
If I untick the following code in the inspector window, everything is looking perfect. When the following code is ticked in the inspector window everything is messed up. Is it possible to overwrite this code somehow, so the class is not used?
.cms-area img {
width: 100%;
}
You can use !important in such cases but use it sparingly. Best is to remove the unwanted code and not use !important. !important might cause issues later that are difficult to debug. If possible include your css after other css is included in the code. In CSS, rules that appear later take precedence over earlier rules
Edit:
Set width to auto instead of 100% to fix your alignment issue
Below given is the ideal way to manage css since it allows you to attribute your style content and lets you override the style already applied elsewhere.
.cms-area .your-class img {
width: <your choice>;
}
I'm trying to edit some background on a page. I don't have access to the html file, only .css and .js. The page has a default theme that won't expand the background on the whole screen (bottom) because of the structure. I managed to swap the default background .png with an animated gradient through css but now I need to change the div. Tried with the #import url at the very top of the css file to call an external css but it won't work. Are there any ways to override the html structure? thank you
Forgot to say that I don't have access to the default template's css either. The service keeps everything on the server and once I installed the template in the local folder (the whole thing works with dropbox) I found an additional .css and .js in which I can add other code, though they come basically blank. What I need to do is to override the template's div structure from one of those 2 files. Using DevTools i found the name of the template div class and I guess I can download the relative .css. Still don't know how to override it... I'm not too familiar with coding in general...
Not clear with what you're trying to do. But you can always use Javascript DOM manipulation functions.
Check out this link for that: http://callmenick.com/post/basics-javascript-dom-manipulation.
You can also use jquery which provides better API.
If it is in some class definition or in a stylesheet file then use selector with high Specificity to get your definition on high priority
.oldclass{
width:328px;
height:328px;
background-image:url('http://via.placeholder.com/328x328');
}
/*Your New definition*/
div.oldclass{
background-image:url('http://via.placeholder.com/328x328');
}
<div class="oldclass">
</div>
If it is in inline style, then use !important tag
.oldclass{
width:328px;
height:328px
}
/*Your New definition*/
div.oldclass{
background-image:url('http://via.placeholder.com/328x328') !important;
}
<div class="oldclass" style="background-image:url('https://www.gravatar.com/avatar/fca24c2acab4d63343d4608ce256dcec?s=328&d=identicon&r=PG&f=1');">
</div>
Currently I'm helping about with a WordPress site and we have a fixed CSS (I guess that's the case in every WordPress Page) and its set that is "transforms" all letters into Uppercase.
Well I'm supposed to post one article where that shouldn't be the case.
I know that I can access the specific CSS Settings of one Page over the CSS Button, but honestly I don't know what to type to change the preset for this particular page.
Instead of in the Visual editor, go to the Text editor. At the very top of the article, do this:
<div style="text-transform: none;">
And at the end of the article, do:
</div>
In this case you can add css code below and put it on the Additional CSS Customizer (WP 4.7 or higher) or put into style.css file
.page-id-24 {
text-transform: none; /* you may need to use 'none !important' */
}
Please note that you can use .page-id-{pageid} for page and .post-id-{postid} for post. For certain element such as p, h1 and etc you can use .page-id-{pageid} {html tag}.
Cheers!