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.
Related
I am new to Umbraco, and just discovered that the Image editor (the one that is included in selectable editors for content rows) does not provide a way to enter a CSS class. This is surprising, considering that it is pretty standard these days to use Bootstrap classes to style images (img-responsive, for example). NOTE: I had planned to add screen shots of this; however, I've been given a message that I cannot do this until I earn 10 something-or-other-points. THIS NOT HELPFUL TO NEW MEMBERS!
While I understand that I can set a class within the Umbraco UI on the containing column div, this is not ideal. I also understand that I could use the Rich Text Editor, but this seems to be overkill for a column that is intended to contain images only.
What I would like to do is modify the existing editor to allow users to enter CSS classes, but I cannot find it.
Has anyone made this modification to your own implementation of Umbraco, and if so, could you guide me to how I could do this?
The image picker just stores the id of the image, it's up to you how you render it, if the classes are the same for all of the images in the column, you can just assign the class in the view/partial that renders the images.
If you want to have different classes for each image, rather than modifying the built in image picker, best practice is to create a new property editor. There is a tutorial on this here: https://our.umbraco.org/documentation/tutorials/Creating-a-Property-Editor/. Modifying the built in one will cause you problems if you ever upgrade Umbraco (your changes will be overwritten). But a custom property editor will be unaffected, and you can also use it on other Umbraco sites that you build!
Let's say I have two pages, MyWebsite/website/index.html and MyWebsite/website/item.html. Is it possible in AEM for index.html to use menu1 and item.html to use menu2, while each menu is completely different?
This is easily doable. There are so many possible ways of accomplishing your goal; how you do it is going to be based on how you've decided to architect your pages, components, and authoring UX.
If you hard include the navigation component into the page, you could have the index and item pages use different templates and page types. One page type could inherit from the other with only the partial which includes the navigation overlayed. Each page type would hard include a different navigation component.
You could use a single page type with a hard included parsys where the author can use either of your two navigation components.
You could use one page type and have the option to change the navigation component resource type in the page properties.
You could have a single navigation component with the option to change designs in the component dialog.
If by "totally different" you mean that the component style and functionality remain the same, just the link text and destinations change, then you can use a single page component and a single navigation component. The component might read the sibling and/or child pages and dynamically create the links. This is a common scenario.
If you want the navigation component to inherit down to subpages, you can use an iparsys or a regular parsys and InheritanceValueMaps. Both are common practices with different effects depending on your goal.
This was a very broad question. If you choose a direction that you want to go and post code with more specific questions, we can be of more help.
I am using ASP.NET (MVC 4 internet application template). I have the master page and within it I embed another page. This embeded page should have the appearance shown here (Draft): http://snag.gy/OGIut.jpg
This page is three column. First column has a groupbox and into it some radio buttons (options). In the second column there are more groupboxes, as seen in figure above (see link above) and the same for third column. Each groupbox has a title, and before the title a checkbox (this is useful for enable or disable the entire groupbox so user cannot select any options within it). In third column at the end there is a plain button (not 3D), and at the bottom of the page there is a grey section where there is a plain button at the rightmost.
So as I am completely new in web and css programming I am thinking about how to organize all this elements in the view to have the appearance indicated in the picture.
Could anyone help and tell me how to do this? any example? I am very frustrated when working with html and css because I find difficult to place the elements in the correct place.
Maybe you should consider to use frameworks to help to place the element on a grid. The most famous one is of course Bootstrap but there is plenty of these http://usablica.github.io/front-end-frameworks/compare.html. It makes the web development really faster and easier.
Plus, these kind of frameworks comes with JS & CSS library which can be really helpfull to create modern webpage with sliders, smooth scroling, models windiws etc..
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.
I'm hoping my cryptic title isn't too cryptic, but I'll try to explain what it is I actually want to do.
I have a master page 'A' which has child pages 'B' and 'C'.
This is implemented with the standard master page model in ASP.NET just fine.
My site has two themes 'T1' and 'T2'.
They actually represent different partners, T1 being our own company and T2 is a partner.
I want to display specific things on pages 'B' and 'C' depending upon which theme I'm using. For instance I may want to insert additional buttons or graphics on page 'B' specific to partner for theme 'T2'. This content would be at an arbitrary point on the page depending upon the page itself. Some partners may not even use this feature.
The problem is I want to do this as declaratively as possible, and minimize the knowledge that the pages have about the theme.
This is where the 'reverse' master page concept comes in. I want to define an area on a child page into which 'theme' specific content can be inserted. (I'm saying 'theme' because thats what ASP.NET uses - and most likely what I'd tie the content to).
So you may be wondering :
Why can't you just use a master page for this and add extra content sections? Reason is that the content may appear anywhere on the page in a location that is specific to that page.
Why can't you use a 'nested' master page? Essentially the same reason.
Possible solution:
I'm wondering about creating some kind of user control that would have a textual key representing what type of content would be inserted there. The user control would have to know what to display for each 'theme' - probably by dynamically creating the relevant additional user control.
This seems a little clumsy - so I'm wondering what kind of solutions others may have created for similar situations.
you can use CSS to position your content sections anywhere on your page. so i wouldnt worry about page locations, etc.
if it were me, i'd just dynamically load the 2 different css files into the one masterpage and based on the same logic render the different content into the placeholders.
I'm currently working on a site that has similar requirements that are too much for CSS. In one layout the login is horizontal towards the top of the render order, and in another its in the right hand column.
We're using standard ASP.NET themes to push out CSS, logo URLs via SkinID, etc.
To obtain the custom layout I've created a "Loader" control that loads UserControls via a list specified in a Loader attribute. The attribute can be defined directly in the loader markup, or via a .skin file in the theme.
Each key in the list is just the base name of a UserControl (I add the path and extension). The controls are created via Page.LoadControl().
Do you have fix layout for different partners ? Or do you want the partners to choose the layouts on runtime ?
If the layouts are fixed than 1 way is to create zen style CSS (http://www.csszengarden.com/) and than dynamically load it as per the client/partner. If you want the partners to modify the layouts on runtime than probably you might want to use Webparts.
Hope this helps.
You CAN use nested master pages in VS2008!
See here --
Scott Guthrie's Blog