I have an idea for a web application that would allow users to create their own profile pages, and apply custom or pre-defined themes to change the look/feel of their profile page. It would be similar to Wordpress themes, or any other product that utilizes a similar idea. My idea was to build the css using less. The users would be able to create/edit their own themes through a GUI interface (pick colors, fonts, etc). When saving a theme, it would update the variables in the .less files, and rebuild the css accordingly.
Is this a feasible or even possible way to apply style themes to a page? Are there any existing solutions out there that already accomplish this?
One problem i see here is that the user can change other parts of the page which shouldn't be changeable. For examlpe menus, login buttons etc. This could be a security problem.
So you must limit the users ways how to change the styles. For example only allow to change certain classes with certain params.
You can look at jQueryUI themeroller it's one way to let users change the style of their profile while limiting the styles to colors and layout mostly. There are jQuery plugins that let them select a theme from a drop down.
A more custom method would be to possibly set inline styles throughout your template wrap them with php and work that into your GUI. So users select a color of a navigation bar and the hex or rgb color is stored into a db table.
Related
I am working on an application using Vue.js 2.0. and Vuex for state management. I need to implement the possibility of so-called "branding", i.e. the user needs to have the ability to select a theme for their account, a specific color which will then be applied to the application's style.
The first option I went for and managed to implement as a proof of concept was to use Vuex to store the desired style in the application store as an object with Vuex which I then used for binding to the style of the elements it needs to be applied to. The color picker for choosing the color triggers a mutation on the state to change the color. This works completely fine and isn't even too hard to use as it allows for just using an expression like :style ="$store.state.brand" on the html elements it needs to be applied to. It updates on all components as I change the color. This option has its advantages as it is pretty straight forward and also allows the user to select whichever color he/she wants from a color picker. However, it has its limitations in terms of design, as complicated styles cannot be implemented in this way (e.g.color change on hover, active classes for tabs or pages etc.)
So the second option I would like to try and suggest to our client is to have a set of predefined themes from which the user can choose. Those themes would be defined in css files (using sass/less or something similar). What I need to implement now is the following:
When the user chooses a theme, let's say from a dropdown, I want to load the style for the application from the appropriate css file and reload the application to reflect those changes.
What is the most efficient and best practice way to do this in Vue?
So in case anyone else needs this, we ended up using styled components. For more details, checkout https://www.npmjs.com/package/vue-styled-components. We created styled components for elements that need to receive the specified theme's color (button, radio button, header, menu items etc.) and passed them the required color in as a prop. The value of the prop comes from the Vuex store so it is consistent across the whole application. The benefit of this approach is that the color choices are limitless for the client (compared to the predefined themes we were considering). Furthermore another benefit is that now the client can let's say change the color in the vuex store through a color picker and see the theme changing live. Finally, this approach also enables you to use all features of css like creating more complex styles with css selectors for example. This was not possible with regular vue style bindings. Feel free to contact me if you need more details on this.
I'm using this plugin options to put my subject, I make a slide of photos, but do not want to set a limit of photos, would be added as needed, any idea how to do it?
Your safest bet here would be to create a custom post type that feeds the slide of photos as opposed to theme options. The customizor framework as it stands is temperamental and is used more as a user interface for previewing layout and styling changes.
http://www.layerswp.com/ is a theme that allows what you are looking for, but it is not the usual practice as it stands now.
With that being said there are plugins available that might be able to do what you are asking. The best one that I have found is Kirki (http://wptavern.com/kirki-a-free-plugin-to-style-the-wordpress-customizer-and-add-advanced-controls).
I was wondering if someone with Drupal experience could advice what are the best practices in the following situations. I think they are all common tasks for any website that you build.
Display a custom HTML of a certain content type at front-page (e.g., only the link and title).
Should I build a module only for this?
Customize the login form HMTL, including inputs, labels etc, to something very different from the default login block.
Again, another module?
Format the node view of some content types; for example: showing additional fields values. I have some Joomla experience and with it, it's very easy to override the template on your theme.
But with Drupal, it seems HTML is hard-coded on PHP files and there are very few thing that uses templates. Or am I missing something?
You should create a view (from Views module), and for this create display 'block'. This block you can use later on your site. Within your view settings you can choose what and how you will display.
It depends what you would like to put there. If you put just some static text, change theme could be a solution. But still, a bit smelly. What you should do, is to create a module use hook_form_FORM_ID_alter and add both - field to your form, and code to use values which user added.
Change templates for this content type in your custom theme; or use Panels module - here you have nice introduction; or use Display Suite module - which do pretty much the some work as creating a template
html is in php files, but where else can it go? Drupal also has it template overwrite system. The customization of the theme can be usually done using that alone.
As for your questions (there are also other alternative)
load the content type in view/block, display in list format on home page.
create your own theme for css changes. create custom tpl.php for
layout, and div naming etc.
same as above.
It doesn't hurt to create a new module, but generally it's not necessary unless you are going for something like a muti-step form.
You can use both Views & Panels in order to achieve what you've mentioned above.
For instance, Panels gives you the option to override the home page with your own content. This content can be organized with Views.
From drupal.org:
"The Views module provides a flexible method for Drupal site designers to control how lists and tables of content (nodes in Views 1, almost anything in Views 2) are presented."
"The Panels module allows a site administrator to create customized layouts for multiple uses. At its core it is a drag and drop content manager that lets you visually design a layout and place content within that layout."
I have an multi user application with basic layouts where i want to change the layout and style of the page for individual user .
I have one way in mind that to change the css at run time but if i am changing the css then it will take effect for every user and if i will refresh the page then it shows basic page again.
Help me for this problem that if i will change the css then it will take effect only for the same user.
and it will not change after refresh.
Or any buddy has any other idea then please suggest me.
$("div#somediv").addClass("specialuserclass");
JQuery reference or have a stylesheet per user;
You might be interested in doing this using themes and the theme manager plugin I built. The plugin is built to work with jQuery UI themes, but could easily be adapted to your own custom CSS-based themes. This plugin works with individual user preferences for a particular theme stored in a database, though I suppose you could also use a cookie. the latter would take more customization. You can find more info on my blog, http://farm-fresh-code.blogspot.com.
You have to persist the style chosen by each user.
Your can design your function/screen to something like:
1. On create of a new user, give the user the default basic layout and persist this in the server side (you can probably save the user preference in your DB).
2. When he changes style, update the user's user preference record/file
3. On load of the page, retrieve the user preference and change the css style on the server side
If you want to implement this yourself, store your user-specific styles in a dedicated store such as a database, indexed by user. At page construction time (server side) consult your database, looking up the customizations for that user, and apply the CSS you want to that page.
Alternatively there are a variety of theming applications available. These will depend on your server-side tools. For example, ASP.NET offers the Web Parts Framework.
I have an asp.net website with 5 items (home, products, news, about, contact) on the main horizontal navigation.
The site uses a master page which splits the page into a header, body and footer using
I want to be able to display a different header (which will include different colors and images) depending on which of the 5 navigation items is selected.
Can anyone tell me the best way to achieve this without bloating the page download?
I know my way around asp.net, html, css, javascript and vb but I am no expert.
I'd probably create a base CSS class that they'd all use, and then create 5 different themes in the app_themes directory (create one if you don't have one), one for each nav option; in there, you can override the base CSS with more specific options to change the background images / colors. If you're using Asp:Images (instead of background images with CSS), you can also change the source using a .theme file in each theme. This way, you'd only download the relevant files. You'll have to change the Page.Theme on Page_Init.
Are you trying to implement a menu?...
One possible strategy that I can think of is making a usercontrol for the header and then rendering the design in HTML based on the mode.
This way you will still be able to take advantage of a distinct header and will be able to have a flexible design.
Create conditional statements within the header depending on what page is selected.