I have been working on a Rails template recently called BaseApp2. You can see it on GitHub here: http://github.com/dannyweb/BaseApp2
There is an administrators section setup which allows the management of Users and I am working on the ability to add announcements to the public site via the admin section.
What I would really like to do, is come up with two or three alternative colour schemes for the interface and allow the administrator to choose which they prefer and select it. The chosen colour scheme would then show for all users from then on.
I have literally no idea how to go about doing this - ideally I am looking for a tutorial of some sort or something equally beginner-esque.
Thanks in advance!
Thanks,
Danny
It should be fairly easy and there are many ways to do it. You will need to save that preference somewhere. Maybe add an attribute to your user/person model that will specify that preference. And in your admin layout template, based on that preference, add an additional stylesheet. Or, add a class to the body tag and in your style sheet subclass the styles:
body {
background-color: white;
}
body.sunshine {
background-color: yellow;
}
The layout template:
<%= stylesheet_link_tag(current_user.theme) if current_user.theme %>
or
<body class="<%= current_user.theme || '' %>">
Related
grails v 3.3.9, fields plugin
fighting with fields plgin and theres a problem when rendering domain objects and using bootstrap
i've got a sample here from a simple standalone page to show the problem
<p>f:display category </p>
<f:display bean="maintenanceAgreement" >
</f:display>
<hr />
<p>f:field category</p>
<f:field bean="${this.pageScope.maintenanceAgreement}" property="category">
<g:render template="/_fields/map/displayWidget" ></g:render>
</f:field>
<hr />
in essenence i have added a template in "/_fields/map/displayWidget" that renders a drop right table on a button
when you render a map field directly from your Domain object the sample table opens and you get all of the table
however when you
you can see the differences between using f.display (has clipping problem), f.field ( which seems to work) and f.all that ignores my _fields/map/_displayWidget.gsp
I dont want to have not use the fields plugin but its not working with bootstrap templating
has any one come up with a fix for this problem?
the project demo page is here
github standalone page to show rendering problem
the attached shows the output as you try each and select category property
well goldarn it another 2 days down the pan - but i have it !
I thought at first it was something to do with fields plugin processing. so i hacked a clone of plugin project locally and added some bits so i could watch it/debug step through it
in doing so i noted that my dummy web domain class page i'd cut across to the plugin didnt have the clipping problem. but the styles were not the same so i copied main.css and grails.css from ordinary project back into the plugin, then re rendered in the browser - and the clipping happened again.
so its in the css!. some very careful watching of browser and looking at the browser 'inspect' indicated that the clipping seemed to be enabled very early on in the journey.
so in my dummy page i just used
I then spent a day wandering round the various bits of fields plugin as its not that well explained anywhere.
if you look at the plugins taglib display method, by default that triggers the /templates/fields/_list.gsp. naming is a little odd but its the gsp that renders the domains persistent attributes as an ordered list - the plugins default _list.gsp looks like this
<ol class="property-list ${domainClass.decapitalizedName}">
<g:each in="${domainProperties}" var="p">
<li class="fieldcontain">
<span id="${p.name}-label" class="property-label"><g:message code="${domainClass.decapitalizedName}.${p.name}.label" default="${p.defaultLabel}" /></span>
<div class="property-value" aria-labelledby="${p.name}-label">${body(p)}</div>
</li>
</g:each>
</ol>
so after much exploration coming up through templates, from the bottom I ended up right at the top with the '
so nearly there now. back into main.css that i'd copied in. if you edit that, down around line 215 you get this style. If you comment out the overflow property - its all fixed !
.property-list .fieldcontain {
list-style: none;
/*overflow: hidden; */
zoom: 1;
}
I tried auto, scroll, and visible but that seems to much about with too much of the page so best to just comment it out.
once you do that - the rest of the rendering of your forms starts to work !! blimey one line of css for all that pain. Attached is the page using
Lastly through out all this, id ended up digging through /tracing fields plugin. What a nest that is. Not really finished here, but basically
with no body just renders a label and no content. So you either need to provide provide a body tag, say to get the value field displayed.
as
if no widget template has been defined then the renderDefaultDisplay is called which again has very limited options for controlling the rendering by falling through a 'switch (prop.type)' and basically calls either g.format (bool), g.formatDate (but no LocalDateTime/LocalDate Support) or g.fieldValue, non of which are bootstrap enabled.
if you call
these two diagrams are not beautiful but just high level pseudo code walk through for what the core tags are trying to do. One day i'll try and pretty that up but it might help you if you get stuck
I'll raise a bug for the main.css clipping directly to the grails team and see what happens, but you can comment the line out yourself if you fall foul of it.
I made a file called template.css.scss in my Rails app that holds all the color styling that I want dynamically changed based on a user's preferences.
Here's a little sample of it:
/* pink */
$lighter-shade: #F75F9E;
$darker-shade: #B54573;
.navbar-inverse {
background-color: $lighter-shade;
}
#command-header {
color: $darker-shade;
}
I thought I could do a migration to add a column to track the user's styling preference. Of course, there would be a default setting. Then I could update the Sass variables based on the preference.
Unfortunately, from my research it seems like the way to go is to create separate templates and then set those dynamically based on the user's preference. I really hope that's not the case because the way I have things structured right now is concise and efficient, and I'd hate to lose that.
How would you go about this?
one way to handle: get the user's preference and put it into a
data-user-preference="<%= current_user.pref %>">
then use jquery to add the appropriate class based on that pref
$('.class-name').data('user-preference').addClass('whatever')
I am using Ruby on Rails 3.1.0 and I would like to know if it is possible to use CSS classes in mailer templates (.html.erb). At this time, in order to style emails, I am using HTML code like the following:
<div style="margin: 4px 0 12px;">
<span style="font-size: 14px;">
...
</span>
</div>
So, is it possible to use CSS classes in mailer templates? If so, where and how I should state and use those classes?
Code like it's 1995, because email clients (particularly Outlook 2007, Gmail, Hotmail) support a very limited set of HTML elements and CSS attributes. Use tables, inline styles, presentation elements (i.e. <b> instead of font-weight:bold).
Useful links on coding for email:
http://www.sitepoint.com/code-html-email-newsletters/
http://kb.mailchimp.com/article/how-to-code-html-emails
http://www.campaignmonitor.com/css/
Stylesheets have a tendency to be stripped by some mail clients (especially with web mail services) so the use of style attributes is recommended instead.
Yes. ERB allows you to write any HTML you would normally.
However, because it's email and clients are notoriously bad at rendering CSS consistently, you should use inline formatting as you have in your example. (I know that's horrible).
You could insert a <style>.myclass { color: red; }</style> at the top of the mailer template and then use <div class="mclass"> in the template, but chances are that this style tag will be removed by the client.
You're lucky because there's a gem called Roadie that solves this problem elegantly. See the RailsCasts episode Sending HTML Email for more information.
I'm using event calendar plug-in on rails 2.3.8 and I need to know whether I can change the calendar size dynamically. For example in one page I need to show calendar in full page in another page I need to put that same calendar in small div. Is it possible with the event calendar plug-in ?
Without the real example, I can only give a sketch how it could possibly work:
Include the view in something like:
<div id="smallcal">
<%= event_calendar %>
</div>
Add then a stylesheet that copies the rules of event_calendar.css, but modifies them like in the following example:
#smallcal > .ec-calendar { ... modified rules here ... }
So your modified rules will match better only for your variant where you want to make the calendar smaller. Perhaps it is possible to ensure that the calendar is smaller by including:
div#smallcal {
width: 200px;
...
}
I was wondering if anyone could comment on which way is better and WHY?
Here is a simplified version of what I have ( in HAML):
#header
#root
#content
= yield
#sidebar
= context_navigation
#footer
The problem:
I want #sidebar to display on some pages to show context menu, such as on the account page to show links to profile, password, order history. On the product page show links to product specifications, description, "send link", etc. But not on other pages - such as on the home page I need to use the whole width of #root for #content to show news or featured items.
Solution & Question:
I have several ideas on how to implement it, but I was looking for some input at to which one you think is better and please explain WHY? The main objective is maintainability of code.
Here are some ideas:
CSS \ SCSS trickery - make the sidebar a collapsible div if there context navigation is empty
Use an else/if to load different partials depending on which part of the site I'm in.
Create a separate layout (seems like an overkill - as I understand layouts are to be used mostly for different media such as screen vs. print vs. pdf vs. mobile - etc)
Any other ideas?
Thank you,
Nick
You could use nested layouts to get this working:
http://guides.rubyonrails.org/layouts_and_rendering.html#using-nested-layouts
Different views might serve you well... you may need to rethink your controller also to make them more use case specific. Going along this route will make you app more dynamic, increase cohesion amongst all of the components and allow for greater extensibility.