I have fomantic-ui 2.8.8 installed on express 4.161. I'm pretty sure fomantics is working, since in header.hbs I changed the line:
<div class="ui mini borderless main bottom attached stackable menu ">
to
<div class="ui inverted mini borderless main bottom attached stackable menu ">
and the results was a header that was all black with white text.
But I can't seem to change the default theme settings. Absolutely everything I change in
semantic/src/site or semantic/src/theme has no effect.
That makes zero sense to me. The settings have to be coming from these files.
For instance I changed the file "semantic/src/themes/default/globals/site.variables" from:
#emSize : 14px;
#inputBackground : #white;
to:
#emSize : 34px;
#inputBackground : #red;
and this had no effect on my web page. I made plenty of other changes of all sorts of variations, but nothing had any effect.
Any ideas anyone?
SOLVED
fomantic-ui was installed using gulp.
Inside the semantic folder is a gulp.js file, a src folder, and a dist folder.
Changing the files in src does nothing until you run "gulp watch" while changing the src files.
Then gulp creates updated "dist/semantic.css" etc. files.
Now, in your .hbs or .html you can reference the new "dist/semantic.css"
(I was missing the "gulp watch" step.)
Related
Long story short, I'm having some serious trouble getting themes to work in general - even for the "HelloWorld" base app that comes preinstalled with Vuetify. For some reason Vue/Vuetify do not apply any colors to anything unless I use the "color=" tag and even when I use "color=" it only uses the color I specify an not any shades or highlights of that color. When I change the theme from "light" to "dark" or vice versa nothing happens (again, I'm having the same issue with the "HelloWorld" app). I feel like I've gone through all the documentation for themes a hundred times and am looking for anyone to point me in the right direction. I should add that for one reason or another the theme IS working on a random v-list-group in the nav drawer but not to the items above or below the group. I'm using Vue 2 and Vuetify 2.
Things I've Tried
Making a new theme using the theme generator on the Vuetify website and inserting it into the ./src/plugins/vuetify.js file as instructed by the documentation.
Attempted inserting the theme at the bottom of ./src/App.vue between the <script> </script> elements. This worked for someone else but didn't do it for me.
Completely uninstalled and reinstalled Vue-CLI using the command line.
Completely deleted and recreated my project.
Remaking my project using Vue 3 and Vuetify 3. This does work but Vuetify 3 does not yet have the components I need for my project.
When I add the search block to the topnav in Bootstrap Theme, the login button is "broken"
ZK2.0.13 with Bootstrap Theme. When the block is added, the user login appear in a new line (example)
I expect see topnav in a single line.
I found an answer for you. What I did was set up the page as you had it and then viewed it in Chrome. The app has some really nice dev tools for experimenting with css. Choose View->Developer->Developer Tools (Cmd-Option-I on a mac). From there right-click on the search box and choose inspect. You can then see on the right panel all the css that is affecting your element and see how the html gets laid out. I noticed that the search box was wrapped in a div with an input-group style so that was the one I wanted to mess with. I found if I added the below code it does what you want:
.input-group {
position: relative;
display: table;
border-collapse: separate;
float: right !important;
width: 200px;
padding-top: 6px;
}
The last three css commmands are the change that makes the difference. To fix the Bootstrap theme I went to themes/BootstrapTheme/Resources/public/css/style.css and added the above code to style.css. Don't forget to delete the cache folder in /var/cache (either prod or dev) before you test it out.
One concern I have with this solution is that .input-group might get used elsewhere and this may interfere. A quick inspection didn't show it being used anywhere else except the search box. If it is somewhere else, you will have to create your own theme (not hard) and manually write some code.
Thanks Paustian. It's working.
I have edited the file: Resources\ZikulaSearchModule\views\Block\search.html.twig in order to change the css class to "myInput-group". Then I have edited Resources/public/css/style.css and add your changes to the file.
Thanks for all guys.
I have a angular 5 component that is using ngbootstrap and bootstrap 4 to display a tabset. The tabset does not style correctly.
I am using ngb elsewhere in the project and it seems to work fine elserwhere.
Here is my component template:
I'm importing ngbmodule into my sub module:
and I have it imported forRoot() in my app module:
I also made sure to add bootstrap.min.css to my angular-cli.json when troubleshooting (and made sure the file was there):
Yet, when I view my component, the ngb-tabset isn't rendering correctly at all:
I have restarted ng serve many times and checked my console for errors (clean), I'm not sure what could be the issue, as our ngb modals and ngb date pickers have been working fine (and still are) :'(
This was my problem:
<ng-template ngbTabContend>
<p> here's some content</p>
</ng-template>
notice Contend instead of Content. D'oh!
I'm trying to manually position the Shareaholic sharebar WP plugin. I am using a vertical one, and want it to be in a fixed position on the left side of my screen beside my main content area. So far I have figured out how to get it onto my site, but not able to position it. I'm referencing this post of someone who tried to do a similar thing.
I'm using this code to insert it into my single.php
<?php echo do_shortcode('[shareaholic app="share_buttons" id="4766761"]'); ?>
But haven't had any luck with getting css positioning to work, or where exactly to put it in my single.php file
Right now it's just below this code :
<main class='content units <?php avia_layout_class( 'content' ); ?>' <?php avia_markup_helper(array('context' => 'content','post_type'=>'post'));?>>
And it's showing up above the post content.
Any suggestions?
Many thanks
Jonny
Custom CSS should be added to your styles.css theme file, but it is recommended to create a child theme when making any adjustments within your theme so that you will not run the risk of losing your customization if/when your theme releases a new version and you update.
I have develop my UI under common folder, then I create a skin for my tablet and name it as android.tablet. But when I run it on my tablet simulator, it looks like this:
I use below code in skinLoader.js:
var userAgent = navigator.userAgent;
var skinName = "default";
//android tablet
if(userAgent.toLowerCase().indexOf("android") != -1 &&
userAgent.toLowerCase().indexOf("mobile") == -1){
skinName = "android.tablet";
alert("tablet!");
}
//android phone
else if(userAgent.toLowerCase().indexOf("android") != -1 &&
userAgent.toLowerCase().indexOf("mobile") != -1){
skinName = "default";
alert("default!");
}
HTML:
<div data-role="page" id="homePage" class="fullWidth">
<div data-role="header" data-tap-toggle="false">
<div class="ui-title">...</div>
</div>
<div data-role="content" style="text-align: center">
Login
</div>
</div>
CSS:
.fullWidth{
width: 100% !important;
}
Why it can't be full screen? Any code I lack?
Have you made sure to read the Worklight Skins training module?
The basic premise for Worklight Skins is this:
Create a new Worklight project, application
Add a skins-supported environment (Android, BlackBerry 6/7/10, iPhone, iPad)
For the sake of simplicity, update skinLoader.js to point to the skin's folder ("android.skin" for example)
Create a CSS and JS files in the respective folders of the skin
Copy the HTML file from common to the skin folder
Do whatever you want in the CSS, JS and HTML in the skin folder, like changing color and adding an alart
Build all & Deploy
Verify the color and alert are displayed, ensuring it is the skin and not default that was loaded.
To preview the skin's web resources:
Right-click on the android environment folder
Choose Run As >> Preview...
Select the skin from the Skin dropdown
Click the Run button
You should now see the skin (previewing only displays web resources, not native parts if you have any).
If this fails, you can try altering the URL as follows.
This essentially strips away the MBS container and displays only the web resources.
From:
http://localhost:8080/_MobileBrowserSimulator/index.html?webpage=http://localhost:8080/apps/services/preview/your-app-name/android/1.0/your-skin-name-here/your-html-filename-here.html&devicesFilePath=devices.json&platform=android&ips=169.254.236.125,9.148.205.249,10.0.0.2
To:
http://localhost:8080/apps/services/preview/your-app-name/android/1.0/your-skin-folder-name/your-html-filename-here.html
This process will hopefully get more streamlined in a future release...
As for it being full screen or not, that's completely in the hands of the developer (your CSS, etc), and not Worklight's.
I see you're using jQuery Mobile, look at these:
http://jquerymobile.com/demos/1.2.1/docs/toolbars/bars-fullscreen.html
How to set header to full screen mode in jQuery Mobile?
If you want to develop for Android tablet make sure that element in AndroidManifest.xml (inside of Android project) declared that. By default only normalScreens support is set to true.
You might need to adjust CSS. By default it has fixed width of 320px and dynamic height, which pretty much is what you have on a screenshot.