I have one master page that is used for three pages. Thats how its going to be I cant do anything about it. This master page generate a class element that have a background color of white. I want to have it white on one of the pages and black on another.
But the problem is that both pages use same master page which means I cant specify to have different color. The pages are generated by a hive which means that I cant edit the pages. I can only use the css file and the master page.
Any kind of help is very appreciated
If you could detect somehow the page id/name that uses the master would be ok.
Or using javascript take your url and compare it, so if it's the first page apply inline style for black and if not leave it white.
if you can add some inline css
body {
background: ;
}
Related
I understand that when making a simple website it is better to only use one CSS file but I was wondering how do I do that if I want the layout of each page of my website to look slightly different?
For example, if you go a website such as nhl.com the home page has a different layout than the stats or standings page (other than the nav bar at the top).
There is no right or wrong here.
However, one way is to have some over-arching indication of what page is being shown.
In the case of nhl.com which you cite, in the body tag they have an id which indicates the current page.
For example:
<body id="homepage_index" class="lang-en_US league-nhl" data-app-ads="false">
<body id="scores_index" class="lang-en_US league-nhl" data-app-ads="false">
and so on.
Then for styling that is specific to a page you can add the id at the front of the selector.
For styling that is common to all the pages like the navbar in your case you don't put the id.
I need to add a particular wallpaper in the background page of my app to make the app look more colorful and beautiful. Is there any way?
The problem is that once you add an image to a page then it does not allow you to place another widget over it or cover it. It always aligns it horizontally or vertically.
This is pretty much basic css. I'd recommend you to look over this to learn more. So, in appmaker, if you want to apply the background image to a page do this:
The CSS
1.) First, select the root widget of the page you are interested.
2.) Now, that you have the page selected, let's move to the style editor. Once there, on the Page Style section just type a "."(period, dot) and wait for the suggestions to appear. The first suggestion is what you need, so just press enter or select it with your cursor.
3.) Now that you have selected the element with a css selector, you can apply styling. For the background, you need to do this:
.app-myTestingPage-myPage {
background: url("url-to-picture");
}
In the above example, url-to-picture represents that, a url to a an image, preferably if it is served over https.
The URL
I know two ways in which you can get the background image url. The first one is to use any image url you find on the internet or a url hosted in your own server or cdn. The second way is to upload the image to appmaker resources and use that url. If you choose the latter, then do the following:
1.) Go to the app settings.
2.) Click on Resources
3.) Drop your image file in the respected area or click the button to browse
Once the resource finishes uploading, you can click the copy icon to copy the url to the resource and you can use that in your page css as the background url.
You should be able to accomplish this using CSS in your style editor. Either in your 'Page style' or 'Global style' depending on if you only want the background image to a specific page or be available throughout your application. You will want to declare a custom class or reference the specific elements that you want to render the background image in.
For a specific element:
.app-YourPage1-YourPanel, .app-YourPage2-YourPanel {
background-image: url(YourImageURL);
}
For a global style, create a class and for each element you want the background image applied you would add that class to the 'Styles' section of that element(widget):
.YourPanelClass {
background-image: url(YourImageURL);
}
Either way I highly suggest you do a search on 'html background image' so you can read up on additional options such as repeating the image to fill space and such.
I have a site that has multiple pages. The first page is just a listview with icons and links to the other pages. CSS stylesheets work fine on the first page, but when I go to one of the linked pages, my custom css stylesheet (and js for that matter), related to that page, is being ignored. If I look in the FF inspector I see that it has dropped the associated lines that tell it about my stylesheet. If I directly go to the desired page or if I hit refresh, the styles look fine, but whenever I come from a link off the first page, the styles are gone. I see no errors when loading the page. Is this a know issue? How can I force it to not ignore my stylesheets.
I am using jquery mobile 1.4.5 in addition to my own.
Looking further. It looks like hitting the link is appending the body of the 2nd page at the end of the first and not simply loading the 2nd page.
It turns out that by default links behave a little different than normal when using jQuery Mobile. The don't do a full page load, but instead only inject the part contained in a div marked with data-role="page". I did not know this.
http://demos.jquerymobile.com/1.1.1/docs/pages/page-links.html
Is there a way to change the CSS style, according to what page the users clicks? And not load different CSS files every time, to do this?
I have a web mapping site, so in small devices I want to do display : none for the header, so the map's div will appear bigger. I will use media queries for this, but the header also changes in all the other pages. I want it to change only in the map's page.
How can I do this? It would be great if there is a method that you dont have to load different CSS files. Is it?
Thanks in advance.
EDIT
The structure of my files is like
<?php
error_reporting(E_ALL);
include_once('header.php');
//rest of the code of the file starts here....
where header.php contains header, menu bar, metadata.
So I cannot just give an id to the header, cause it will still be the same id visible from all the pages
Thanks again
If your page is static one and you need to make only one change, just create a class with display:none; and apply the same to the header without affecting any other page or page elements.
This way, your header also gets hidden and your purpose also gets resolved.
Other way would be to add an id to your <body> and by using parent child CSS selector, hiding your header subsequently for those pages.
Hope this helps.
ou can check your URL through JavaScript and add style for specific element
example
if (window.location.href.toString().toLowerCase().indexOf("map") != -1) { // If url contains maps
document.getElementById("p2").style.display="none";
}
I've recently started getting familiar with Atlassian Confluence (v. 3.3), but I'm having trouble understanding the best way to use page hierarchies within a space.
Within a space, pages can be located underneath the "Home" page, or one level higher, next to the home page. However, in the "Documentation" theme, the left sidebar page hierarchy is only shown for pages rooted below "Home". This means that the "Home" breadcrumb is always displayed when viewing pages that appear in the sidebar hierarchy.
So, what is the purpose of having pages on this top level? Should it be used specifically to hide pages from the sidebar hierarchy (like meta)?
Is it possible to have the sidebar hierarchy display for pages rooted next to Home (on this top level), instead of below it?
Is it possible to remove the Home breadcrumb?
How many of these questions are made irrelevant by later updates to the software?
The only real purpose I can think of for having a page on the same level as the home page would be to disclude it from a page-tree display starting at the home page. So if you have some pages you use for holding images, documents, testing content, et cetera then you would not want it to show up in the hierarchy viewed by regular users.
When you define a page-tree macro, or the children-display or anything similar, you can specify which page it is displaying the hierarchy from. If you want to use a page other than the home page, just specify it in the page-tree macro.
I don't believe it is possible to remove the breadcrumb, or at least I don't know how.
Software updates will maybe bring some other page-tree-esque options but won't fundamentally change anything else we're talking about here.
So, what is the purpose of having pages on this top level?
Specifically? You'd have to ask Atlassian.
Generally? The default configuration is that only pages from the specified Home page down are shown in the navbar.
Should it be used specifically to hide pages from the sidebar hierarchy (like meta)?
Yes. Any page which is used for navigation, control or configuration is stored at the top of the hierarchy. That way they don't show up in the navbar.
Using the {alias} macro will create a page in the top hierarchy.
If you use a page as input to your navbar then this page can be stored here out of user sight but still publically visible. So, if you had a page with lots of markup for a colourful and exciting navbar named SpaceNavigation then in the Documentation Theme Configuration you would have this code:
{include:SpaceNavigation|nopanel=true}
Is it possible to have the sidebar hierarchy display for pages rooted next to Home (on this top level), instead of below it?
Yes. Use the pagetree macro.
{pagetree:root=#none}
You can edit the space theme to show anything in the left navigation bar.
Browse > Space Admin > Theme > Configure theme
Untick the 'Page Tree' option at the top. Put your code to display content in the navbar in the navigation box.
If you want a pagetree somewhere in your custom navigation use the {pagetree} macro. You can set the root page to a page lower in the hierarchy. {pagetree:root=apple}
The {children} macro is also useful here.
The reporting macros can print a list of all pages in a space. You can build your own macro or import a wiki page to display as the navbar.
Is it possible to remove the Home breadcrumb?
This may need clarification. Are you looking to remove the breadcumbs or just the word 'home'.
Either way, the answer is 'JavaScript or CSS'.
If you are a space administrator you can add CSS styles to the space to disable CSS for the space from the header.
If you have the {html} macro or {style} then you can add styles and JavaScript to the wiki page.
If you are a wiki administrator, or have one on your side, then you can create a macro or plugin to put CSS or JavaScript code on the page.
Here is a code sample to find two classes on a page and after the page has loaded (document.ready) hide them.
{html}
<script type="text/javascript">
AJS.$(document).ready(function() {
AJS.$(".first").hide();
AJS.$(".second").hide();
});
</script>
{html}
This example will remove the word 'Dashboard' as it has the class of 'first'.
Go forth and write the code to find the objects that so draw your ire and vanquish them.
CSS is also an option and sometimes less messy.
Some CSS objects can be removed from the page from within the page. E.g:
{html}
<style type="text/css">
ol.breadcrumbs { visibility:none; !important; }
</style>
{html}
However, to remove objects at the top of the page you need to use javascript or put CSS in the space style sheet.
Browse > Space Admin > Stylesheet
How many of these questions are made irrelevant by later updates to the software?
It's pretty much the same. Some styles have changed. Some things have been moved around. The general look has changed.
Some of the style sheets have changed and they have said that they are looking to deprecate the Documentation Theme. However, given the community support for the Documentation Theme even if they remove it no doubt it will be available as a downloadable theme in V6.
If you are interested in looking at this yourself then you can download Confluence V5 with a trial licence or try their OnDemand free for one month.