Help me create CSS

Resolved mryous
(@mryous)

5 years ago
Best Plugin sir..!
Can You help me create CSS for my site using this theme :
LINK
1. modulehome-wrap
2. gmr-big-headline and
3. .site-main, article.post
.
or maybe can u give us some example how to using it with theme function
–
Thanks
- This topic was modified 5 years ago by mryous.

Viewing 15 replies - 1 through 15 (of 25 total)

1 2 →

Plugin Author johnzenausa
(@johnzenausa)

5 years ago

Is this your website or just a site you’d like to emulate?

Plugin Author johnzenausa
(@johnzenausa)

5 years ago

Okay give me several days to come up with something.
Plugin Author johnzenausa
(@johnzenausa)

5 years ago
I got one done for now. The first one is modulehome-wrap.
Here is the shorcode I used:
[netsposts include_blog='19' shortcode_id='modulehome_wrap' thumbnail='true' hide_source='true' hide_excerpt='true' include_link_title='true']

Note: If you want all posts you’d remove include_blog='19' attribute I only used it for clarity.

With the accompanying CSS:
```
#modulehome_wrap .netsposts-block-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit,250px);
	grid-gap: 25px;
	justify-content: center;
}
#modulehome_wrap .netsposts-content {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
}	
#modulehome_wrap .netsposts-posttitle-link {
	order: 1;
	color: #000000;
}
#modulehome_wrap .netsposts-posttitle-link:hover {
	color: #21409a;
}
#modulehome_wrap .link-img-wrapper {
	order: 0;
	display: block;
	overflow: hidden;
	border-radius: 4px;
	transition: .3s;
}
#modulehome_wrap .link-img-wrapper .post-thumbnail {
	display: block;
	width: 100%;
	transition: .2s all ease-in-out;
}
#modulehome_wrap .link-img-wrapper:hover .post-thumbnail {
	transform: scale(1.2);
}
#modulehome_wrap .netsposts-read-more-link {
	display: none;
}
```
Here is the test page I created. You may hover over the images to see the same affect.

https://amsoilwarehouses.syntheticmotoroil.org/sample-page/

If you have the page the shortcode will be on directly I can help you modify even though this should suffice anywhere.
- This reply was modified 5 years ago by johnzenausa. Reason: Fixed typo
- This reply was modified 5 years ago by johnzenausa. Reason: Explain why I used include_blog
Plugin Author johnzenausa
(@johnzenausa)

5 years ago

I didn’t see the scrolling effect on mobile. I’ll give you the css code later.

Thread Starter mryous
(@mryous)

5 years ago

thaank you so much sir @johnzenausa .., youre very kind
Im using that theme (wpberita) (which is a clone version of detik Indonesian news portal)
I really want to know how wordpress made like those (detik.com) much subdomain used.
right now I just try it on my localhost. later I’ll try to put it on live server.

Plugin Author johnzenausa
(@johnzenausa)

5 years ago

Still trying to figure out the responsive part

Thread Starter mryous
(@mryous)

4 years, 12 months ago

Thanks so much sir..,
but sir, how to make the shortcode working inside box item
i see the thumbnail and the content are separated
screenshot
Plugin Author johnzenausa
(@johnzenausa)

4 years, 12 months ago
What do you mean inside box item? Did you want the text where? Did you want the layout to look like the image you sent me?
- This reply was modified 4 years, 12 months ago by johnzenausa.
- This reply was modified 4 years, 12 months ago by johnzenausa. Reason: Clarifying question
Thread Starter mryous
(@mryous)

4 years, 12 months ago

yup sir..
like the image ive sent before,
“post-thumbnail” at the left and
on the right side the “box-content” showing netsposts-posttitle and netsposts-source
Im using the same theme in main and sub site.
Plugin Author johnzenausa
(@johnzenausa)

4 years, 12 months ago
@mryous Sir;

Add the following argument to your shortcode and this will give you a similar look. Once you have your site set up it’ll be easier for me to give you exactly what you need Sir.

Here is the shortcode:
use_layout='inline'.

This will separate the image from all other content. The image will be on the left and all text including title and excerpt will be on the right. Using css you may flip these for the image to be on the right and text on the left.

Hope this is what you’re looking for Sir. 🙂
- This reply was modified 4 years, 12 months ago by johnzenausa. Reason: Explaining use_layout="inline"
Thread Starter mryous
(@mryous)

4 years, 12 months ago

Thanks a million sir @johnzenausa I owe you one!!
I’ve done setup my site, where I can contact you for access? 😊

Plugin Author johnzenausa
(@johnzenausa)

4 years, 12 months ago

The support form is here Sir;

https://support.agaveplugins.com/contact

and send me the information there.

Thank you Sir;

Thread Starter mryous
(@mryous)

4 years, 12 months ago

Many Thanks sir
I’ve submitted a request via your support page 😊

Plugin Author johnzenausa
(@johnzenausa)

4 years, 12 months ago

@mryous Sir;

I have answered your email.
Plugin Author johnzenausa
(@johnzenausa)

4 years, 12 months ago
Hi @mryous Sir;

Did you want to make the first image:
https://drive.google.com/file/d/1lHcmNiPHpW9urpLR8pjtL6kp8wayT1N6/view?usp=sharing

look like this image?
https://drive.google.com/file/d/1Hm2jyq2pmPy1j4VRdLccZIZGVpm_pPx1/view?usp=sharing

The second one has the image on the left and the text on the right.

Or same as above but with the text vertically center aligned with the image?
https://drive.google.com/file/d/1wfi_JUA4m0R3MptGTVFlLLJGXbg7gHGO/view?usp=sharing
- This reply was modified 4 years, 12 months ago by johnzenausa. Reason: Added third image