I am using fullPage.js fullpage slider in my project. but i need the customized image as navigation dots. I searched the fullPage documentation also. but i cant find out the solutions. Anybody know about this, Thanks in advance.
Use this code and it will solve your needs.
.fp-slidesNav ul li:hover a.active span{
background-image: url("../img/bullets.png");
height: 22px;
width: 22px;
margin: -6px 0 0 -6px;
border-radius: 100%;
}
This css code enable bullet images on your slider.
You can use the menu option.
You can create any kind of menu / nav with it and it will add the active class where it should.
From the documentation:
menu: (default false) A selector can be used to specify the menu to link with the sections. This way the scrolling of the sections will activate the corresponding element in the menu using the class active. This won't generate a menu but will just add the active class to the element in the given menu with the corresponding anchor links. In order to link the elements of the menu with the sections, an HTML 5 data-tag (data-menuanchor) will be needed to use with the same anchor links as used within the sections. Example:
Just use a class if you want to have multiple menus / navs.
menu: '.myNav'
Otherwise, you can also use the fullPage.js callbacks or the fullPage.js state classes to activate and desactivate the elements of any nav or menu.
Check this answer here.
Related
How do I remove the "Release" footer at the bottom of the Oracle APEX template? I can't see it in the Global page, or anywhere obvious in the page templates or user interface attributes (Shared Components).
Footer is defined in page templates.
You would need to remove html footer from template body, make sure to remove it from any page template you are using.
Otherwise you could use css to hide it.
EDIT for clarity:
To edit the template for a page, you can do that either under Shared Components or on the page itself.
While editing the page, there's 2 places you could look (I'm assuming Apex 22 at this point):
on the left side, find Templates > Page. Expand Page, and right-click the name below it (maybe "Standard"). Click Edit.
on the right side under Appearance, find the "Page Template" value. Click the ">" icon to select the template, then click "Edit Component".
Both of those options will take you to the same place as Shared Components > Templates > [the name of your page template]
On that page, you're looking for the HTML <footer> tags, which are usually in the Body section of the template. To remove the app version, look for substitution variable #APP_VERSION# and delete it.
Note that if your page template is part of a theme which is subscribed to Standard Theme, it will be read-only, and you won't see a Save button at the top. You would need to either (a) copy it to a new custom theme, and then change your application to use that theme instead, or (b) unsubscribe your theme from the Standard Theme - this will make it read-write, but prevent it from receiving any Oracle updates to the Standard Theme. This is outside the scope of the current question, but please see the documentation
CSS to remove footer:
.t-Footer{
display: none;
}
Other commands to remove parts of footer:
.t-Footer-top{
Display: none !important;
}
.t-Footer-srMode{
Display: none !important;
}
.t-Footer-version{
Display: none !important;
}
.t-Footer-apex{
Display:none !important;
}
not sure if "!important" is needed
Go to your page template and remove it or add it as css
footer{display:none!important}
And voila.
Using ckeditor in Drupal 8. The dropdown menu itself is too small and short and the type inside is too large. How can I actually change the formatting of the Styles dropdown menu itself?
I'm not sure if you need to do anything special inside Drupal 8 however from CKEditor point of view you need to change CSS classes responsible for dropdowns.
Below are classess used by dropdowns in CKEditor 4.x for default skin.
Dropdown buttons on toolbar:
.cke_combo__font .cke_combo_text
.cke_combo__fontsize .cke_combo_text
.cke_combo__format .cke_combo_text
.cke_combo__style .cke_combo_text
Dropdown panels:
.cke_combopanel__font
.cke_combopanel__fontsize
.cke_combopanel__format
.cke_combopanel__styles
To resize editor droprown button and panel for e.g. Format, please add the following rules in your page CSS file:
.cke_combo__format .cke_combo_text{
width:150px !important;
}
.cke_combopanel__format {
width:250px !important;
}
Since Toolbar is a part of main page, these rules can be included in head section of your HTML page, can be put in external CSS file which is then imported to your HTML page (with the help of link tag) or can be added in editor CSS skin files directly e.g. in editor.css although that last method will be problematic in case of editor upgrades so I don't recommend it.
Drupal 8 / 9: You can define a stylesheet for CKEditor in your (Admin-)Theme to override the appearance of the editor.
First add a new CSS-file (e.g. css/ckeditor-override.css) to your admin-theme.
Add the following line to your admin-(sub)theme's info-file (e.g. myadmintheme.info.yml):
ckeditor_stylesheets:
- css/ckeditor-override.css
Then you can change the appearance of the editors – see hints of j.swiderski answer – for example:
.cke_combopanel {
width:200px !important;
}
.cke_panel_list .mystyle {
font-size: 1em !important;
}
If your stylings do not work, have a look into your theme: Maybe it styles the editor, too, and overrides your stylings?
Some themes – like "Gin" – make it easy and provide a css-file for custom overrides. Then simply put your style-overrides for the editor there.
If you don't want to create a subtheme you can try Asset Injector-Module.
I would like to scale an image that is saved in Shared Components so that the right side of it is exactly on the right end of the screen.
How is that possible?
I am using Oracle APEX 5.1.
I am assuming you are displaying the image in a Display Image page item.
In the item properties, under Advanced, set the Custom Attributes property to:
style="width: 100%"
This screenshot shows two Display Image items based on the same small picture (held as a static application file). The second has the style property:
See my demo page on apex.oracle.com
Alternatively, this could be done using CSS defined in a file or in page inline CSS like this:
#P123_MY_IMAGE_ITEM {
width: 100%;
}
Or you could set the item's CSS Classes property to e.g. "full-width" and define the CSS as:
.full-width {
width: 100%;
}
This is probably the best option if you will do this to many images.
Hi everyone just started learning Fullpage.js here and i was wondering if i can let's say divide my page into 3 sections 1 for header 1 for section and 1 for footer. Then set 4-5 sliders in the Section part. what i want is for the navbar to highlight only the current slider in that section not all 4-5 of them at once...
like so:
Then when i go to the sections it does this:
and the last section:
how do i make it only active on the current slider and not all of them?
Thank you in advance ^^
I would recommend you to make use of the fullPage.js state classes for that. Probably the easiest way.
Using the fp-viewing-x-y class added to the body should be quite easy. For example:
.fp-viewing-home-0 #menu li:nth-child(1){
background:red;
}
.fp-viewing-home-1 #menu li:nth-child(2){
background:red;
}
.fp-viewing-home-2 #menu li:nth-child(3){
background:red;
}
Reproduction online
If you prefer to use jQuery or JavaScript, you can make use of fullpage.js callbacks such as onLeave.
See another of my answers and the example online.
Using Firefox on OSX when I cmd+click on a table cell I get an blue inner outline.
I searched for a way to disable this behavior on my web application but didn't found anything.
I tried to capture the onclick or set the CSS outline to 0px to no avail.
I also looked at MDC Mozilla CSS extension but many are undocumented.
Is there a way to remove this inner outlinein a given HTML doc?
You must set CSS property -moz-user-select to none of the container table element.
table {
-moz-user-select: none;
}
This will not only disable cell selection but will also unable you to select text inside the table.