SharePoint Rounded Navigation Tabs/Colors - css

I'm hoping to get some direction on the following scenario. I have some UI/UX design experience but not much in working with SharePoint 2013 branding. What I need to accomplish is the following:
Custom "tab" style navigation in the left hand and top of the page. These would look like folder tabs along the top, and on the left hand side they would only be rounded on the right corner. I understand that I need to edit the CSS but not sure how best to accomplish this considering some of our page requirements. We want to have the tabs along the top and left but each department's "page" is a different color theme.
Example of tabs required
Do I edit the Master Page CSS to get the rounded tabs look and then that is applied to each page, but that page keeps its color selection or do I have to do a CSS page for each page? For example, a department uses the color palette selection to assign their colors but the Master Page takes care of the tabs modification or do I have to do a Master Page for each department's page?
ANY direction would be a big help. I just need to deploy this as simply as possible but not sure how. -Thanks!

Related

Wix type page transitions? how to remake from scratch

Not sure if it's an appropriate question, but I will still ask..
Any advice on how WIX (the simple website builder) sites do the page transitions? such as transiting into a page with a Left to Right swipe in and loading the page on demand?
I have tried searching for tutorials but I am not too sure what to look for exactly.
Are these CSS and a combination of jquery?
Any advice would be appreciated.
An example site of the said transition:
http://www.alllinkmedical.com/
Thank You.
EDIT I mean to ask: where do I start looking at to create such page transitions on sites built from scratch
http://www.wix.com/support/main/html5/wix-editor/pages#Changing+Your+Page+Transitions
Taken from Wix website:
Changing Your Page Transitions
You can choose a page transition for your pages. The page transition determines how your pages will shift and what your visitors will see when they navigate from page to page.
To change your page transitions:
From the left side of the Editor, click the page icon to open Pages.
Under Page Transitions, click the drop-down menu and select a transition.
Now if you want a custom transition, I'd recommending looking at jQuery

Need suggestion how to solve master page css layout

Can you please point me in the right direction?
What I need is pretty much what these two random pages have:
vmware
chmprocessor
I need a layout with a header + footer and a left menu.
I am building this in asp.net and in the left sidebar I will have a treeview control.
Maybe use Master page and load user control in the content area or something similar.
I have googled, like: 2 column css layout etc, but it looks like it wont work.
I tried this one: Netrostar
and some other but I cant enter jsfiddler urls for som reason.
The left menu has problem. If I enter a long text, it will show up in the content area.
So the left sidebar must somehow have a dynamic width.
Since the left sidebar can have need for beeing very wide (if we are looking deep in the treeview hierarchy)
it is pretty convenient to use frames as they do in the two examples above.
But that was not recommended even 10 years ago, I guess.
Im no good at css, so I probably need a working example.
How would you have solved this?
Thank you

swipe gestures and Wordpress templates

I'm looking to do a mobile web app in Wordpress. I need the template to have a thin (~3/4 inch) horizontal rectangular section at the very top that can be swiped to the left/right to serve as the navigation. Basically, every time you swipe this section to the right/left, it changes the page below it. I've seen templates where the whole page swipes, but not split in this was as I described it here. If anyone has any pointers for me on how to customize the template like this, I'd really appreciate it.
Try this plugin. They support Swipe left, right, up, down and double tap. you can specify the area where you want wordpress to register the gestures, say in your case it would be the ID of the Div you want user to swipe in. Let me know if you face any difficulty.

how to make a tabbed page, when you have 6-7 pages to load?(css/jquery)

i want to make a css/jquery tabbed for an "Admin panel", so it will all be loaded without the need to refresh.
im going to do it dynamicly but its a small exercise site so i know ill have only 3-4 main "areas" to edit in the panel (the tabs in the top).
the thing is i have other links for each editing area.
is there a way to do it with jquery, without the need of putting all the code in 1 page, in 3-4 divs and make them all invisble except the tabed being choosen(like ive seen in examples)?
in examples i saw all the content in one page, and if adding the top tabs and also the pages of each area(lets say delete, edit etc) its alot of code.
is there a comfortable way of doing it, while being able to make it dynamicly in the future?
edit to answers:
i already made tab from the this tutorial:
http://net.tutsplus.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
the thing is, at first in the admin menu i have like 13-14 html pages(before it becomes php) with different operations.
how would you take 13 pieces of code(they have the layout and the admin+admin menu yet the content is changed) that should be in different files, and make them show up in the same tab?
would you have to split each code to only its div, and then load it someway?
from the tutorial above, they used all of the content in one page and used invisible......
how would you load 13 pieces?
Have a look at the jQuery UI Tab Widget:
you can load the tab content statically or dynamically with AJAX
it uses the jQuery CSS framework
it's easy and full of sample code

Items without regions in Oracle APEX?

I'm currently building a web form using APEX that is losely modelled after a "wizard" style. That is, I have forward and back buttons for most pages, etc, etc.
The problem I have is that it seems all my buttons need to be part of a region and that region needs to located in a pre-determined section of the page.
I would prefer to be able to place my buttons where I want them rather than include them into a specific region. I just want them at the bottom of the page.
At the very least, I need to get a region to ignore all my theming so that it can be "invisible" so that only the buttons are showing.
Can anyone point me in the right direction?
See this example I just created on apex.oracle.com. The buttons are in a separate region that has no template associated with it.
In fact, it would be better to create a new region template for the buttons region, with no decoration applied. This would give you more control over the location and spacing of the buttons. At its simplest this template could be defined as:
<div id="#REGION_STATIC_ID#" class="myButtonTemplate">
#BODY#
</div>
(The ID is optional, but I like all my tags to have IDs so I can reference them in Javascript and CSS if required.)

Resources