I am using Spring security UI and every time I add
<r:require module="register"/>
<r:layoutResources/>
(this should add the style for spring security UI)
To my head of the auth file it moves my page from being nicely centered to top left
any Ideas?
I know its something to do with the reset.css file but each time i change it it also changes the login fields.
I don't like this way of centering a page but in the reset.css file in the plugin add this code to the bottom.
html {
margin: 0 auto;
width: 1024px;
}
Related
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
Following the guide at https://www.youtube.com/watch?v=fJSUs0bTPMc I can add a "red-text" class to the text side of the block and, using the Customize --> Additional CSS page watch the changes applied live.
This does not work, however, for the image. I just want to apply rounded corners, which should be as simple as .my-rounded-image { border-radius: 30px; }, but it is not.
More specifically:
Add "red-text" to Advanced --> Additional CSS Classes for one of the paragraph blocks on the text side.
Add "my-rounded-image" to Advanced --> Additional CSS Classes for the image side
Publish page, View page, Customize Page
Go to Additional CSS in Customize view
Add .red-text { color:red; } and see it updated on the paragraph previously modified
???? Cannot get anything applied to image
I have tried this with a normal image block without success as well.
You need to add overflow: hidden; as well:
.wp-block-media-text__media {
border-radius: 30px;
overflow: hidden;
}
I can't manage to understand what's wrong with my website, if it's something with CSS or something else. When I go to the home page http://www.nomadtravellers.com/
the layout is correct. But when clicking on any other menu, as in example "About Us" some of the modules (Photo moasaic, breadcrumbs, etc.) are moving slightly down, while some other are staying in the correct position. Any suggestion on how to fix it?
It is build with joomla 2.5.11 if that matters.
I've already tried to deactivate Css optimization, and it's still the same behaviour
you have different styles for main and inner pages. on main page css there's a reset rule for form (the search field form in your header):
form {
margin: 0;
padding: 0;
}
on inner pages:
form {
margin-bottom: 18px;
}
Today when I wrote css I found that there are some problems appearing. I used bootstrap and darkstrap to design. In darkstrap the body's style is
body {
color: #c6c6c6;
background-color: #2f2f2f;
}
And in my own css:
body {
background: url(../img/11.jpg) no-repeat fixed;
background-size: 100% 100%
}
It looks no problem but the only question is when I switch the page, the page seems to have an asynchronous load (but I didn't refresh the page), first completing the style in darkstrap, then loading my style after 1 second. But I put my css before the bootstrap and darkstrap. And I just not refresh the page.
At last, I quote the body style in darkstrap, when I switch the page again, the body's background-color also complete after 1 seconds, it looks awful, I know the image load may send a http request and its loading may last. But I just switch the page... so where is the problem?
Where are you loading the scripts and css? Is it and the end of the page body?
One way to fix this might be to move the script loading into the page <head> section. When you do this, all of it will be loaded before any body markup. This will ensure that your CSS and the bootstrap css is ready before you see anything on the page. The downside of this is that it might make the page appear to take longer to load.
There could be other reasons, but this is the first thing that sprang to mind for me.
A very simple question. I do not know Apache Tiles.
For a Spring Roo generated web app the views are created using Apache Tiles. The classic layout with the menu on the left is created.
I want to have the menu (menu.jspx) appear on the right hand side of the page instead of the classic left hand side. How do I do this?
I have read the Apache Tiles tutorial on the main web site, however the description there uses jsp and html.
You have the alt theme in Spring Roo default generated User Interface.
It has the menu to the right. Go ahead and customize.
I figured it out.
I had to edit the standard.css file menu items.
I got to thinking that all of the jspx elements are controlled by the css files. Sounds like a no brainer no but I am use to using html tables to do all of the ui work, not css.
So, I found a place http://csscreator.com/node/461 that had some sample code and I modified it for the standard.css menu elements and below is what I pasted in. Its not perfect but it is a place to begin.
#menu {
background-image: none;
position: absolute;
right:0px;
width: 525px;
top: 80px;
height: 15px;
display: inline;
}
#menu ul{
padding: 3px 5px;
border-left: 1px solid #cccccc;
list-style: none;
display: inline;
}
Your best option for moving around the menu is to modify the css as you have described above. However you also have the option of changing where the menu appears in the html source by modifying the page layout file. This can be found under WEB-INF/layouts/default.jspx.
You could then choose to use a table based html layout if that was your preferred option.
I hope this helps
Your other option is to select the "alt" option on the page which will auto-change to the layout you want.
If you then make that the default layout instead