I'm having trouble getting my CSS sprite effect to work in my rails app, not sure why because I don't totally understand the concept.
Heres my submit button code:
<%= f.submit '', :class => 'submitpost'%>
and the CSS behind it:
.submitpost {
border: none;
height: 40px;
width: 145px;
background: url('sharebutton_up.jpg') 0 0;
}
.submitpost:hover {
cursor:pointer;
height: 40px;
width: 145px;
background: url('sharebutton_down.jpg') 0 -40px;
}
Thanks in advance!
background: url('sharebutton_down.jpg') 0 -40px;
I think you should remove -40px since you have changed the images from sharebutton_up to sharebutton_down already
Related
Well, I am developing my own Content Management System using ASP.NET MVC and for a page builder I've decided to use GrapeJS. Now, since this is new to me, I can't seem to find a way to save the pages I would have assembled using GrapeJS. I have used the gjs-preset-webpage GrapeJS plugin and the only JavaScript for the assembling area I have is as shown below:
<script type="text/javascript">
var editor = grapesjs.init({
height: '100%',
showOffsets: 1,
noticeOnUnload: 0,
storageManager: { autoload: 0 },
container: '#gjs',
fromElement: true,
plugins: ['gjs-preset-webpage'],
pluginsOpts: {
'gjs-preset-webpage': {}
}
});
</script>
The HTML I've used is as follows as well:
<div id="gjs" style="height:0px; overflow:hidden">
<div class="panel">
<h1 class="welcome">Welcome to</h1>
<div class="big-title">
<svg class="logo" viewBox="0 0 100 100">
<path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2" />
</svg>
<span>GrapesJS</span>
</div>
<div class="description">
This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can
copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.
</div>
</div>
<style>
.panel {
width: 90%;
max-width: 700px;
border-radius: 3px;
padding: 30px 20px;
margin: 150px auto 0px;
background-color: #d983a6;
box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
color: rgba(255,255,255,0.75);
font: caption;
font-weight: 100;
}
.welcome {
text-align: center;
font-weight: 100;
margin: 0px;
}
.logo {
width: 70px;
height: 70px;
vertical-align: middle;
}
.logo path {
pointer-events: none;
fill: none;
stroke-linecap: round;
stroke-width: 7;
stroke: #fff
}
.big-title {
text-align: center;
font-size: 3.5rem;
margin: 15px 0;
}
.description {
text-align: justify;
font-size: 1rem;
line-height: 1.5rem;
}
</style>
</div>
Now that I have embedded it into my project and can assembled pages using it, I can't seem to find how to save or where would the assembled page be to be saved. Can anyone help me?
You need a endpoint to allow grapes' storage manager to send your site current status information. I save the json and html just in case, but I think json is enough. Well then you setup your storage manager.
const editor = grapesjs.init({
storageManager:{
type: 'remote',
autosave: true, // Store data automatically
urlStore: 'YOUR_ENDPOINT_URL',
}
});
You will get a call to your endpoint every time something changes with the following parameterts:
gjs-assets: Assets array
gjs-components: Object with markup definition of your site
gjs-styles: Object with styles definition
gjs-html: your site HTML
gjs-css: your CSS
Just be sure to inject this definitions when initialising grapes as well:
const editor = grapesjs.init({
components: "YOUR_STORED_COMPONENTS_HERE",
style: "YOUR_STORED_CSS_HERE",
storageManager:{
type: 'remote',
autosave: true, // Store data automatically
urlStore: 'YOUR_ENDPOINT_URL',
}
});
For further information: Docs
I am looking for the corresponding tag of the following html code:
<img src="/assets/folder1/<%= #user.fullname %>.jpg" style='height:100%; width: 100%; object-fit: contain' alt="user" />
As you can see the part of the link to the picture is define by the varaiable user.fullname. The html works well but I am looking for the equivalent in Ruby.
Thanks for your support
https://apidock.com/rails/ActionView/Helpers/AssetTagHelper/image_tag
image_tag("/assets/folder1/#{ #user.fullname }.jpg", class: 'image')
CSS
img.image {
width: 100%;
height: 100%;
object-fit: contain;
}
I need to make my jQuery mobile slider rails thicker. I also need to make the knob of the slider larger as well. I have visited other SO threads and tried to change the CSS rules of the slider. The class of the slider widgets has been set to jquerymobileslider.
Here is the relevant contents of a tag within my index.html:
.jquerymobileslider .ui-slider {
height: 50px;
}
.jquerymobileslider .ui-slider .ui-slider-handle {
height: 50px;
width: 50px;
}
However I see no changes.
Any ideas?
The default height is already 50px, try the following ensuring it's applied after the default CSS styles and see if you notice any visual changes:
.ui-slider-track {
height: 75px;
}
.ui-slider-handle {
height: 75px;
top: 0%;
}
I have a listboxfor in my application which works greats. But to make multiple selection I need to press ctrl and click on the item. How can I change this behavior, so every time I click on the item in the list it selects it and when press again it deselects but only one of the selected items.
My listbox:
#Html.ListBoxFor(m => m.selectedCharts, new SelectList(#Model.Graphs.ToList() )
, new { #class = "select_change" }
)
Or maybe I should use different control for this purpose?
Many thanks
I've used Bootstrap Multiselect before, with great success.
If it cannot be a drop down, use this Checkbox list instead.
I have managed to complete a nice looking listbox where user don't need to press ctrl button to select multiple elements. I want to share with you my work. I have used suggested by MartinHN an amazing extension CheckBoxListFor. You can find it on this website MvcCheckBoxList.
My View Code
#{
var htmlListInfo = new HtmlListInfo(HtmlTag.vertical_columns, 0 , new { #class="styled_list" });
#Html.CheckBoxListFor(model => model.ReportSettings.Ids,
model => model.AvailableGraphs,
graph => graph.Id,
graph => graph.Name,
model => model.SelectedGraphs,
new { #class="styled_checkbox" },
htmlListInfo,
null,
x => x.Name)
}
My CSS:
input.styled_checkbox, input[type="checkbox"]
{
visibility: hidden;
width: 0px;
}
.styled_list
{
background: #aeeefb;
border-radius:5px;
padding: 10px 10px 10px 0;
color: White;
font-weight: bold;
}
.styled_checkbox
{
background: #69D2E7;
cursor: pointer;
display: inline-block;
vertical-align: middle;
margin: 3px 0 3px 0;
padding: 5px;
position: relative;
width: 250px;
border-radius:5px;
}
.styled_checkbox:hover
{
opacity: 0.7;
}
.styled_checkbox:checked+label
{
background: #1a9eed;
}
The check boxes are hidden and labels indicates that element is selected or not. I can't insert pictures but it looks good, but you can off course edit style to your own needs.
Hope that helps anyone
Complete CSS newbie here who just applied the image resizing trick in the accepted answer to this question: How to position a background image like wanderfly.com?.
Problem: The resizing works great, but the image appears in the foreground, blocking the content in all of my pages rendered via yield. How do I push the image to the background?
relevant portion of application.html.erb:
<body>
<%= image_tag("background.jpg", :id => "background") %>
<%= yield %>
</body
css stylesheet:
#background {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
The answer is in the comments to the answer you linked to:
don't forget the z-index:-9999 or your
image won't behave much like a
background image
So:
#background {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -9999;
}
See: http://jsfiddle.net/XW9Pz/2/